快捷導(dǎo)航

常用javascript表單驗(yàn)證匯總

更新時(shí)間：2020年07月20日 14:14:07 投稿：lijiao

這篇文章主要介紹了一些常用javascript表單驗(yàn)證，文章最后還附帶了一個(gè)實(shí)踐案例，以驗(yàn)證數(shù)字為例進(jìn)行講解，感興趣的小伙伴們可以參考一下

實(shí)例講解：驗(yàn)證輸入的是否是數(shù)字，是否滿足數(shù)字位數(shù)，如果錯(cuò)誤，并進(jìn)行友情提醒。

效果圖：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p>請輸入數(shù)字。如果輸入值不是數(shù)字，瀏覽器會(huì)彈出提示框。</p>

<input id="demo" type="text">

<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""){
alert("輸入不能為空");
return;
}

if(isNaN(x)){
alert("請輸入數(shù)字");
return;
}

if(x.length!=6){
alert("請輸入6位數(shù)字");
return;
}

}
</script>
<button type="button" onclick="myFunction()">點(diǎn)擊這里</button>
</body>
</html>

上面這個(gè)實(shí)例包含了許多常用的表單驗(yàn)證的代碼，下面分享給大家：

1、驗(yàn)證表單

2、驗(yàn)證昵稱

3、計(jì)算昵稱長度

4、驗(yàn)證昵稱是否存在

5、驗(yàn)證手機(jī)號(hào)

6、驗(yàn)證密碼

7、驗(yàn)證郵箱

8、驗(yàn)證驗(yàn)證碼

9、判斷是否選中

注冊驗(yàn)證為例：

<script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

//驗(yàn)證表單
   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();
   }

//驗(yàn)證昵稱
   function vailNickName(){
    var nickName = jQuery("#nickName").val();
    var flag = false;
    var message = "";
    var patrn=/^\d+$/;
    var length = getNickNameLength();
    if(nickName == ''){
     message = "昵稱不能為空！";
    }else if(length<4||length>16){
     message = "昵稱為4-16個(gè)字符！";
    } else if(checkNickNameIsExist()){
     message = "該昵稱已經(jīng)存在，請重新輸入！";
    }else{
     flag = true;
    }
    if(!flag){
     jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-error");
     jQuery("#nickNameP").html("");
     jQuery("#nickNameP").html("<i class=\"icon-error ui-margin-right10\">&nbsp;<\/i>"+message);
     //jQuery("#nickName").focus();
    }else{
     jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-success");
     jQuery("#nickNameP").html("");
     jQuery("#nickNameP").html("<i class=\"icon-success ui-margin-right10\">&nbsp;<\/i>該昵稱可用");
    }
    return flag;
   }

//計(jì)算昵稱長度
   function getNickNameLength(){
    var nickName = jQuery("#nickName").val();
    var len = 0;
   for (var i = 0; i < nickName.length; i++) {
     var a = nickName.charAt(i);

　　　　　　//函數(shù)格式：stringObj.match(rgExp) stringObj為字符串必選 rgExp為正則表達(dá)式必選項(xiàng)
　　　　　　//返回值：如果能匹配則返回結(jié)果數(shù)組，如果不能匹配返回null
     if (a.match(/[^\x00-\xff]/ig) != null){
     len += 2;
    }else{
     len += 1;
    }
   }
    return len;
   }

//驗(yàn)證昵稱是否存在
   function checkNickNameIsExist(){
    var nickName = jQuery("#nickName").val();
    var flag = false;
    jQuery.ajax(
    { url: "checkNickName?t=" + (new Date()).getTime(),
     data:{nickName:nickName},
     dataType:"json",
       type:"GET",
       async:false,
       success:function(data) {
       var status = data.status;
       if(status == "1"){
        flag = true;
       }
      }
   });
   return flag;
   }

//驗(yàn)證手機(jī)號(hào)
   function vailPhone(){
    var phone = jQuery("#phone").val();
    var flag = false;
    var message = "";
    //var myreg = /^(((13[0-9]{1})|159|153)+\d{8})$/;
    var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-3]{1})|(18[5-9]{1}))+\d{8})$/;
    if(phone == ''){
     message = "手機(jī)號(hào)碼不能為空！";
    }else if(phone.length !=11){
     message = "請輸入有效的手機(jī)號(hào)碼！";
    }else if(!myreg.test(phone)){
     message = "請輸入有效的手機(jī)號(hào)碼！";
    }else if(checkPhoneIsExist()){
     message = "該手機(jī)號(hào)碼已經(jīng)被綁定！";
    }else{
     flag = true;
    }
    if(!flag){
     jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-error");
     jQuery("#phoneP").html("");
     jQuery("#phoneP").html("<i class=\"icon-error ui-margin-right10\">&nbsp;<\/i>"+message);
     //jQuery("#phone").focus();
    }else{
     jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-success");
     jQuery("#phoneP").html("");
     jQuery("#phoneP").html("<i class=\"icon-success ui-margin-right10\">&nbsp;<\/i>該手機(jī)號(hào)碼可用");
    }
    return flag;
   }

//驗(yàn)證手機(jī)號(hào)是否存在
    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;
    }

 //驗(yàn)證密碼
   function vailPwd(){
    var password = jQuery("#password").val();
    var flag = false;
    var message = "";
    var patrn=/^\d+$/;
    if(password ==''){
     message = "密碼不能為空！";
    }else if(password.length<6 || password.length>16){
     message = "密碼6-16位！";
    }else if(patrn.test(password)){
     message = "密碼不能全是數(shù)字！";
    }else{
     flag = true;
    }
    if(!flag){
     jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-error");
     jQuery("#passwordP").html("");
     jQuery("#passwordP").html("<i class=\"icon-error ui-margin-right10\">&nbsp;<\/i>"+message);
     //jQuery("#password").focus();
    }else{
     jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-success");
     jQuery("#passwordP").html("");
     jQuery("#passwordP").html("<i class=\"icon-success ui-margin-right10\">&nbsp;<\/i>該密碼可用");
    }
    return flag;
   }

//驗(yàn)證確認(rèn)密碼
   function vailConfirmPwd(){
    var confirmPassword = jQuery("#confirm_password").val();
    var patrn=/^\d+$/;
    var password = jQuery("#password").val();
    var flag = false;
    var message = "";
    if(confirmPassword == ''){
     message = "請輸入確認(rèn)密碼！";
    }else if(confirmPassword != password){
     message = "二次密碼輸入不一致，請重新輸入！";
    }else if(patrn.test(password)){
     message = "密碼不能全是數(shù)字！";
    }else {
     flag = true;
    }
    if(!flag){
     jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-error");
     jQuery("#confirmPasswordP").html("");
     jQuery("#confirmPasswordP").html("<i class=\"icon-error ui-margin-right10\">&nbsp;<\/i>"+message);
     //jQuery("#confirm_password").focus();
    }else{
     jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-success");
     jQuery("#confirmPasswordP").html("");
     jQuery("#confirmPasswordP").html("<i class=\"icon-success ui-margin-right10\">&nbsp;<\/i>密碼正確");
    }
    return flag;
   }

//驗(yàn)證郵箱
   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 = "該郵箱地址已經(jīng)被注冊！";
    }else{
     flag = true;
    }
    if(!flag){
     jQuery("#emailDiv").removeClass().addClass("ui-form-item has-error");
     jQuery("#emailP").html("");
     jQuery("#emailP").html("<i class=\"icon-error ui-margin-right10\">&nbsp;<\/i>"+message);
     //jQuery("#email").focus();
    }else{
     jQuery("#emailDiv").removeClass().addClass("ui-form-item has-success");
     jQuery("#emailP").html("");
     jQuery("#emailP").html("<i class=\"icon-success ui-margin-right10\">&nbsp;<\/i>該郵箱可用");
    }
    return flag;
   }

//驗(yàn)證郵箱是否存在
   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;
   }

//驗(yàn)證驗(yàn)證碼

 function vailCode(){
    var randCode = jQuery("#randCode").val();
    var flag = false;
    var message = "";
    if(randCode == ''){
     message = "請輸入驗(yàn)證碼！";
    }else if(!checkCode()){
     message = "驗(yàn)證碼不正確！";
    }else{
     flag = true;
    }
    if(!flag){
     jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-error");
     jQuery("#randCodeP").html("");
     jQuery("#randCodeP").html("<i class=\"icon-error ui-margin-right10\">&nbsp;<\/i>"+message);
     //jQuery("#randCode").focus();
    }else{
     jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-success");
     jQuery("#randCodeP").html("");
     jQuery("#randCodeP").html("<i class=\"icon-success ui-margin-right10\">&nbsp;<\/i>");
    }
    return flag;
   }

//檢查隨機(jī)驗(yàn)證碼是否正確
   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("請確認(rèn)是否閱讀并同意XX協(xié)議");
    }
    return false;
   }
function delHtmlTag(str){
 var str=str.replace(/<\/?[^>]*>/gim,"");//去掉所有的html標(biāo)記
 var result=str.replace(/(^\s+)|(\s+$)/g,"");//去掉前后空格
 return result.replace(/\s/g,"");//去除文章中間空格
}

以上就是實(shí)用的javascript表單驗(yàn)證，希望大家喜歡。

您可能感興趣的文章: