Javascript实现表单验证

表单验证

为了保证用户提交的信息都是正确的，保证系统的安全性，验证是必不可少的，验证一般分为两种方式。

客户端验证：直接在客户端执行JS进行验证，验证的过程中和服务器端没有任何的交互
服务器端验证：页面将验证信息传回服务器端，服务器端进行验证，并将验证的结果发送回客户端

这两个验证都是必须的，因为客户端的验证安全性不是太高，但是可以防止80%以上的用户的误操作，可以减轻服务器端的压力，而且速度非常快，用户体验高。不要以为有了客户端的验证就不需要了服务器端的了，客户端的验证是很容易绕过去的，服务器端验证安全性比较高，所以一般验证两个验证都需要写。

先看看下面这个注册界面，对用户的注册信息我们是有要求。不正确的信息是不会提交给后台服务器的。每一个控件我们都分别定义了对应的验证方法。

<form action="doregisert.jsp" id="formsub" >

    <table>

    <tr>

        <td>用户名：</td>

        <td><input type="text" name="username" id="username"

        οnblur="checkusername()" /></td>

        <td><span id="usernameerror"></span></td>

    </tr>

    <tr>

        <td>密码:</td>

        <td><input type="password" name="pass" id="pass"

        οnblur="checkpass()" /></td>

        <td><span id="passerror"></span></td>

    </tr>

    <tr>

        <td>确认密码:</td>

        <td><input type="password" name="pass2" id="pass2"

        οnblur="checkpass2()" /></td>

        <td><span id="pass2error"></span></td>

    </tr>

    <tr>

        <td>邮箱:</td>

        <td><input type="text" name="useremail" id="useremail"

        οnblur="checkuseremail()" /></td>

        <td><span id="useremailerror"></span></td>

    </tr>

    <tr>

        <td>固定电话:</td>

        <td><input type="text" name="uerphone" id="uerphone" /></td>

        <td><span id="uerphoneerror"></span></td>

    </tr>

    <tr>

        <td ><input type="submit" value="注册"  /></td> 
        <td ><input type="reset" value="重置"  /></td>

    </tr>

    </table>

</form>
————————————————
、

实现验证验证方法：

<script type="text/javascript">

   function checkusername(){

        var username=document.getElementById("username");

        var usernameerror=document.getElementById("usernameerror");

        var unamevalue=username.value;

        if(unamevalue.length<6||unamevalue.length>20){

            usernameerror.innerHTML="<font color='red'>用户格式不对</font>";

            return false;

        }else{

           usernameerror.innerHTML="正确";

            return true;

        }  

   }

    function checkpass(){

        var pass=document.getElementById("pass");

        var passerror=document.getElementById("passerror");

        var passvalue=pass.value;

        if(passvalue.length<6||passvalue.length>20){

            passerror.innerHTML="<font color='red'>密码格式不对，必须介于6至20</font>";

             return false;

        }else{

           passerror.innerHTML="正确";

            return true;

        }     

   }

    function checkpass2(){

        var pass=document.getElementById("pass");

        var pass2=document.getElementById("pass2");

        var pass2error=document.getElementById("pass2error");

        var passvalue=pass.value;

         var pass2value=pass2.value;

        if(passvalue!=pass2value){

            pass2error.innerHTML="<font color='red'>密码不一致</font>";

             return false;

        }else{

           pass2error.innerHTML="正确";

            return true;

        }  

   }

   function checkuseremail(){

       var useremail=document.getElementById("useremail");

        var useremailerror=document.getElementById("useremailerror");

        var useremailvalue=useremail.value;

        //liubao@tom.com  

        //js  /正则表达式/

        var reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;

        if(!reg.test(useremailvalue)){

            useremailerror.innerHTML="<font color='red'>邮箱格式不对</font>";

            return false;

        }else{

           useremailerror.innerHTML="正确";

           return true;

        }

   }

</script>

现在只是验证提示，发现验证不过关还是网页还是会提交的，所以需要为这个form表单也绑定事件。

注意这里需要在onsubmit前面加上return。对应的js函数的实现

//1.声明变量
var emailObj;
var usernameObj;
var passwordObj;
var confirmObj;
var emailMsg;
var usernameMsg;
var passwordMsg;
var confirmMsg;
//页面加载之后，获取页面中的对象
window.onload = function() {
    emailObj = document.getElementById("email");
    usernameObj = document.getElementById("username");
    passwordObj = document.getElementById("password");
    confirmObj = document.getElementById("confirm");
    emailMsg = document.getElementById("emaileMsg");
    usernameMsg = document.getElementById("usernameMsg");
    confirmMsg = document.getElementById("confirmMsg");
};
//3.检验整个表单
function checkForm() {
    var bEmail = checkEmail();
    var bUsername = checkUsername();
    var bPassword = checkPassword();
    var bConfirm = checkCondfirm();
    return bUsername && bPassword && bConfirm && bEmail;
}
//4.验证邮箱
function checkEmail() {
    var regex =  /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    var value = emailObj.value;
    var msg = "";
    if(!value) {
        msg = "邮箱必须填写";
    } else if (!regex.test(value)) {
        msg = "邮箱格式不合法";
    }
    emailMsg.innerHTML = msg;
    emailObj.parentNode.parentNode.style.color = msg == ""?"black":"red";
    return msg == "";
}
//5.验证用户名‘
function checkUsername() {
    var regex = /^[a-zA-Z0-9_-]\w{0,9}$/;   //字母数字下划线1-10位，不能是数字开头
    var value = usernameObj.value;          //获取usernameObj中的文本
    var msg = "";                           //最后的提示小事，默认为空
    //如果用户名是null或"",!value的值为false，如果不为空 !value值为true
    if(!value) {
        msg = "用户名必须填写";
    } else if (regex.test(value)) {
        msg = "用户名不合法";
    }
    usernameMsg.innerHTML = msg;
    usernameObj.parentNode.parentNode.style.color = msg == ""?"black":"red";
    return msg == "";                       //如果提示消息为空则代表没出错，返回true
}
//6.验证密码
function checkPassword() {
    var regex = /^.{6,16}$/;            //任意字符，6-16位
    var value = passwordObj.value;
    var msg = "";
    if(!value) {
        msg = "密码必须填写";
    } else if (!regex.test(value)) {
        msg = "密码不合法";
    }
    passwordMsg.parentNode.parentNode.style.color = msg == ""?"black":"red";
    return msg == "";
}
//7.验证确认密码
function checkCondfirm() {
    var passwordValue = passwordObj.value;
    var confirmValue = confirmObj.value;
    var msg = "";
    if(!confirmValue) {
        msg = "确认密码填写";
    } else if (passwordValue != confirmValue) {
        msg = "密码必须保持一致";
    confirmMsg.innerHTML = msg;
    confirmObj.parentNode.parentNode.style.color = msg == ""?"black":"red";
    return msg == "";
}