此实例需要验证的内容:中文姓名、手机号、地址,验证方法分享给大家供大家参考,具体内容如下:
<form class="txzl"> <p>请填写资料:</p> <label>姓名:<input type="text" name="username" id="name" /></label> <label>电话:<input type="text" name="userphone" maxlength="11" id="phone" /></label> <label>地址:<input type="text" name="useraddress" id="address" /></label> <div class="info_tj">提交</div> </form>
js:
// 手机号只能输入数字 $("#phone").bind("keyup", function () { $(this).val($(this).val().replace(/[\D]/g, "")); }); // 地址只能输入中文英文数字 $("#address").bind("keyup", function(){ $(this).val($(this).val().replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, "")); }); // 点击提交领奖按钮 验证规则 $('.info_tj').on('click', function () { formValidate(); }); // 验证中文名称 function isChinaName(name) { var pattern = /^[\u4E00-\u9FA5]{1,6}$/; return pattern.test(name); } //test()方法 判断字符串中是否匹配到正则表达式内容,返回的是boolean值 ( true / false ) // 验证规则函数 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 ($.trim($('#phone').val()).length < 11) { str += '手机号位数不正确\n'; $('#phone').focus(); } } // 验证地址 if ($.trim($('#address').val()).length == 0) { str += '地址没有输入\n'; $('#address').focus(); } // 如果没有错误则提交 if (str != '') { alert(str); return false; } else { console.log($('#name').val()) console.log($('#phone').val()) console.log($('#address').val()) } };