常用javascript表单验证汇总_javascript技巧

实例讲解：验证输入的是否是数字，是否满足数字位数，如果错误，并进行友情提醒。

效果图：

我的第一段 JavaScript

请输入数字。如果输入值不是数字，浏览器会弹出提示框。

点击这里

上面这个实例包含了许多常用的表单验证的代码，下面分享给大家：

1、验证表单

2、验证昵称

3、计算昵称长度

4、验证昵称是否存在

5、验证手机号

6、验证密码

7、验证邮箱

8、验证验证码

9、判断是否选中

注册验证为例：

//验证表单
     function vailForm(){
       var form = jQuery("#editForm");
       if(!vailNickName())return;
       if(!vailPhone())return;
       if(!vailPwd())return;
       if(!vailConfirmPwd())return;
       if(!vailEmail())return;
       if(!vailCode())return;
       if(!vailAgree())return;
       form.submit();
     }

//验证昵称
     function vailNickName(){
       var nickName = jQuery("#nickName").val();
       var flag = false;
       var message = "";
       var patrn=/^\d+$/;
       var length = getNickNameLength();
       if(nickName == ''){
         message = "昵称不能为空！";
       }else if(length16){
         message = "昵称为4-16个字符！";
       } else if(checkNickNameIsExist()){
         message = "该昵称已经存在，请重新输入！";
       }else{
         flag = true;
       }
       if(!flag){
         jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-error");
         jQuery("#nickNameP").html("");
         jQuery("#nickNameP").html(" "+message);
         //jQuery("#nickName").focus();
       }else{
         jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-success");
         jQuery("#nickNameP").html("");
         jQuery("#nickNameP").html(" 该昵称可用");
       }
       return flag;
     }

//计算昵称长度
     function getNickNameLength(){
       var nickName = jQuery("#nickName").val();
       var len = 0;
      for (var i = 0; i  "+message);
         //jQuery("#phone").focus();
       }else{
         jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-success");
         jQuery("#phoneP").html("");
         jQuery("#phoneP").html(" 该手机号码可用");
       }
       return flag;
     }

//验证手机号是否存在
       function checkPhoneIsExist(){
         var phone = jQuery("#phone").val();
         var flag = true;
         jQuery.ajax(
          { url: "checkPhone?t=" + (new Date()).getTime(),
            data:{phone:phone},
            dataType:"json",
               type:"GET",
               async:false,
               success:function(data) {
               var status = data.status;
               if(status == "0"){
                 flag = false;
               }
             }
        });
        return flag;
       }

 //验证密码
     function vailPwd(){
       var password = jQuery("#password").val();
       var flag = false;
       var message = "";
       var patrn=/^\d+$/;
       if(password ==''){
         message = "密码不能为空！";
       }else if(password.length16){
         message = "密码6-16位！";
       }else if(patrn.test(password)){
         message = "密码不能全是数字！";
       }else{
         flag = true;
       }
       if(!flag){
         jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-error");
         jQuery("#passwordP").html("");
         jQuery("#passwordP").html(" "+message);
         //jQuery("#password").focus();
       }else{
         jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-success");
         jQuery("#passwordP").html("");
         jQuery("#passwordP").html(" 该密码可用");
       }
       return flag;
     }

//验证确认密码
     function vailConfirmPwd(){
       var confirmPassword = jQuery("#confirm_password").val();
       var patrn=/^\d+$/;
       var password = jQuery("#password").val();
       var flag = false;
       var message = "";
       if(confirmPassword == ''){
         message = "请输入确认密码！";
       }else if(confirmPassword != password){
         message = "二次密码输入不一致，请重新输入！";
       }else if(patrn.test(password)){
         message = "密码不能全是数字！";
       }else {
         flag = true;
       }
       if(!flag){
         jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-error");
         jQuery("#confirmPasswordP").html("");
         jQuery("#confirmPasswordP").html(" "+message);
         //jQuery("#confirm_password").focus();
       }else{
         jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-success");
         jQuery("#confirmPasswordP").html("");
         jQuery("#confirmPasswordP").html(" 密码正确");
       }
       return flag;
     }

//验证邮箱
     function vailEmail(){
       var email = jQuery("#email").val();
       var flag = false;
       var message = "";
       var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 
       if(email ==''){
         message = "邮箱不能为空！";
       }else if(!myreg.test(email)){
         message = "请输入有效的邮箱地址！";
       }else if(checkEmailIsExist()){
         message = "该邮箱地址已经被注册！";
       }else{
         flag = true;
       }
       if(!flag){
         jQuery("#emailDiv").removeClass().addClass("ui-form-item has-error");
         jQuery("#emailP").html("");
         jQuery("#emailP").html(" "+message);
         //jQuery("#email").focus();
       }else{
         jQuery("#emailDiv").removeClass().addClass("ui-form-item has-success");
         jQuery("#emailP").html("");
         jQuery("#emailP").html(" 该邮箱可用");
       }
       return flag;
     }

//验证邮箱是否存在
     function checkEmailIsExist(){
       var email = jQuery("#email").val();
       var flag = false;
       jQuery.ajax(
        { url: "checkEmail?t=" + (new Date()).getTime(),
          data:{email:email},
          dataType:"json",
             type:"GET",
             async:false,
             success:function(data) {
             var status = data.status;
             if(status == "1"){
               flag = true;
             }
           }
      });
      return flag;
     }

//验证验证码

 function vailCode(){
       var randCode = jQuery("#randCode").val();
       var flag = false;
       var message = "";
       if(randCode == ''){
         message = "请输入验证码！";
       }else if(!checkCode()){
         message = "验证码不正确！";
       }else{
         flag = true;
       }
       if(!flag){
         jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-error");
         jQuery("#randCodeP").html("");
         jQuery("#randCodeP").html(" "+message);
         //jQuery("#randCode").focus();
       }else{
         jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-success");
         jQuery("#randCodeP").html("");
         jQuery("#randCodeP").html(" ");
       }
       return flag;
     }

//检查随机验证码是否正确
     function checkCode(){
       var randCode = jQuery("#randCode").val();
       var flag = false;
       jQuery.ajax(
        { url: "checkRandCode?t=" + (new Date()).getTime(),
          data:{randCode:randCode},
          dataType:"json",
             type:"GET",
             async:false,
             success:function(data) {
             var status = data.status;
             if(status == "1"){
               flag = true;
             }
           }
      });
      return flag;
     } 

//判断是否选中
 function vailAgree(){
       if(jQuery("#agree").is(":checked")){
         return true;
       }else{
         alert("请确认是否阅读并同意XX协议");
       }
       return false;
     }
function delHtmlTag(str){
  var str=str.replace(/]*>/gim,"");//去掉所有的html标记
  var result=str.replace(/(^\s+)|(\s+$)/g,"");//去掉前后空格
  return result.replace(/\s/g,"");//去除文章中间空格
}

以上就是实用的javascript表单验证，希望大家喜欢。