這篇文章主要介紹了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()方法 判斷字符串中是否匹配到正則表達式內容,返回的是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(); });