[前端] jquery驗證手機號、社會安全號碼、中文名稱

標籤：

驗證：

中文姓名、手機號、身份證和地址

 

HTML（表單）：

 

<form action="">    <div class="form-group">        <label>姓名：</label>        <input id="name" type="text">    </div>    <div class="form-group">        <label>手機號：</label>        <input id="phone" type="text">    </div>    <div class="form-group">        <label>身份證：</label>        <input id="identity" type="text">    </div>    <div class="form-group">        <label class="label-textarea">郵寄地址：</label>        <textarea id="address"></textarea>    </div>    <p class="tip">請填寫實名認證資訊，以便領獎資料一經提交無法修改，請謹慎填寫！</p>    <div class="btn-group">        <button class="btn btn-md btn-purple" type="reset">取消</button>        <button class="btn btn-md btn-purple ml-20" id="submit" type="button">提交</button>    </div></form>

　　

jQuery驗證：

 

test()方法 判斷字串中是否匹配到Regex內容，返回的是boolean值 ( true / false )

 

 

// 驗證中文名稱function isChinaName(name) {    var pattern = /^[\u4E00-\u9FA5]{1,6}$/;    return pattern.test(name);}// 驗證手機號function isPhoneNo(phone) {      var pattern = /^1[34578]\d{9}$/;      return pattern.test(phone);  }// 驗證身份證 function isCardNo(card) {     var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;     return pattern.test(card); } // 驗證函式function formValidate() {    var str = ‘‘;    // 判斷名稱    if($.trim($(‘#name‘).val()).length == 0) {        str += ‘名稱沒有輸入\n‘;        $(‘#name‘).focus();    } else {        if(isChinaName($.trim($(‘#name‘).val())) == false) {            str += ‘名稱不合法\n‘;            $(‘#name‘).focus();        }    }    // 判斷手機號碼    if ($.trim($(‘#phone‘).val()).length == 0) {          str += ‘手機號沒有輸入\n‘;        $(‘#phone‘).focus();    } else {        if(isPhoneNo($.trim($(‘#phone‘).val()) == false)) {           str += ‘手機號碼不正確\n‘;           $(‘#phone‘).focus();        }    }    // 驗證身份證    if($.trim($(‘#identity‘).val()).length == 0) {          str += ‘社會安全號碼碼沒有輸入\n‘;        $(‘#identity‘).focus();    } else {        if(isCardNo($.trim($(‘#identity‘).val())) == false) {            str += ‘社會安全號碼不正確；\n‘;            $(‘#identity‘).focus();        }    }    // 驗證地址    if($.trim($(‘#address‘).val()).length == 0) {          str += ‘地址沒有輸入\n‘;        $(‘#address‘).focus();    }    // 如果沒有錯誤則提交    if(str != ‘‘) {        alert(str);        return false;    } else {        $(‘.auth-form‘).submit();    }}$(‘#submit‘).on(‘click‘, function() {    formValidate();});

 

[前端] jquery驗證手機號、社會安全號碼、中文名稱