HTML_RegistrationFormAssignment

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hải Thiên - BT Form Đăng ký</title>
</head>
<script>
function chk(){
    var pas = reg.pas.value;
    var repas = reg.repas.value;
    var email = reg.email.value;
    var phone = reg.phone.value;

    var c_pas = /^\w{6,12}$/;
    var c_email = /^\w+@\w+\.\w+(\.\w+)?$/;
    var c_phone = /^[0-9]{8,10}$/;

    if(!c_pas.test(pas)){
        alert("Password phải từ 6-12 ký tự!");
        reg.pas.focus();
        return false;
    }

    if(repas!=pas){
        alert("Confirm password phải trùng với Password!");
        reg.repas.focus();
        return false;
    }

    if(repas!=pas){
        alert("Confirm password phải trùng với Password!");
        reg.repas.focus();
        return false;
    }

    if(email==""){
        return true;
    }else if(!c_email.test(email)){
        alert("Email sai!");
        reg.email.focus();
        return false;
    }

    if(phone==""){
        return true;
    }else if (!c_phone.test(phone)){
        alert("Phone nhập sai!");
        reg.phone.focus();
        return false;
    }


}
function checks(){
    var phone = reg.phone.value;
    var c_phone = /^[0-9]{8,10}$/;
    if (!c_phone.test(phone)){
        document.getElementById("email").style.borderColor="red";
    }else{
        document.getElementById("email").style.borderColor="lightgreen";
    }
}
</script>
<body>
<form name="reg" action="javascript:alert('Congratulation! Welcome to my service');" onSubmit="return chk()">
<h1 align="center">Registration Form</h1>
<table align="center" bgcolor="#CCCCCC">
<tr>
    <td align="right">Login name</td>
    <td style="color:#F00" width="30px" align="center">*</td>
    <td><input autofocus name="name" required></td>
</tr>
<tr>
    <td align="right">Password</td>
    <td style="color:#F00" width="30px" align="center">*</td>
    <td><input type="password" name="pas" required> </td>
</tr>
<tr>
    <td align="right">Confirm password</td>
    <td style="color:#F00" width="30px" align="center">*</td>
    <td><input type="password" name="repas" required> </td>
</tr>
<tr>
    <td align="right">Full name</td>
    <td style="color:#F00" width="30px" align="center">*</td>
    <td><input required> </td>
</tr>
<tr>
    <td align="right">Sex</td>
    <td></td>
    <td><input type="radio" name="sex">Male
        <input type="radio" name="sex">Female
    </td>
</tr>
<tr>
    <td align="right">Date of Birth</td>
    <td></td>
    <td><input type="number" min="1" max="31" value="1" style="width:35px"> /
        <input type="number" min="1" max="12" value="1" style="width:35px"> /
        <input type="number" min="1900" max="2018" value="1900" style="width:50px">
    </td>
</tr>
<tr>
    <td align="right">Email</td>
    <td></td>
    <td><input type="email" name="email"></td>
</tr>
<tr>
    <td align="right">Phone number</td>
    <td ></td>
    <td><input id="email" name="phone" onKeyUp="check()"></td>
</tr>
<tr>
    <td align="right">Hobbies</td>
    <td ></td>
    <td><input type="checkbox"> Swimming
        <input type="checkbox"> Dancing
        <input type="checkbox"> Shopping
    </td>
</tr>
<tr>
    <td align="right">Comment</td>
    <td ></td>
    <td><textarea></textarea></td>
</tr>
<tr>
    <td align="right"></td>
    <td ></td>
    <td><input type="submit" value="Accept"> <input type="reset" value="Cancel"></td>
</tr>
</table>
</form>
</body>
</html>