jquery表单校验
jQuery表单校验插件validator使用方法详解
<tr> <td>性别</td> <td> <input type="radio" id="male" value="m" name="sex" />男 <input type="radio" id="female" value="f" name="sex" />女 <label class="error" for="sex"></label>
validator表单校验的简单示例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css"> table { width: 30%;
<tr> <td></td> <td><input type="submit" id="smtBtn" value="确定"></td> </tr> </table> </form>
jQuery表单校验知识点总结
jQuery表单校验知识点总结表单是网页中常见的交互性组件，用于收集用户输入的信息。
在实际开发中，表单校验是非常重要的，能够有效地提高用户体验和数据的准确性。
jQuery是一个流行的JavaScript 库，它可以简化表单校验的编写过程，提供了丰富的插件和方法来实现表单校验功能。
本文将对jQuery表单校验的知识点进行总结。
一、基本概念1. 表单校验的作用表单校验是确保用户输入的数据符合规定格式的一种方法。
它可以有效地防止用户输入不合法的数据，保障数据的有效性和安全性。
2. jQuery表单校验的优势jQuery提供了丰富的插件和方法，使得表单校验的编写变得简单和高效。
它可以减少开发者的工作量，提高开发效率，同时也能够保障校验的逻辑和准确性。
3. 常见的表单校验规则常见的表单校验规则包括：必填项校验、长度限制、格式要求（如邮箱、电话、网址等）、数字范围限制、密码强度校验等。
开发者需要根据实际需求编写相应的校验规则。
二、jQuery表单校验方法1. 使用jQuery.validate插件jQuery.validate是一个流行的表单校验插件，它提供了丰富的方法和选项，可以方便地实现各种表单校验功能。
开发者可以通过引入该插件，然后结合相应的方法和规则，来实现表单校验功能。
2. 设置校验规则在使用jQuery.validate插件时，需要通过设置规则来指定各个表单项的校验方式。
常见的校验规则包括：required（必填项）、maxlength（最大长度）、minlenght（最小长度）、email（邮箱格式）、url（网址格式）、digits（数字格式）等。
3. 自定义校验方法在实际开发中，某些特殊的校验规则可能无法通过指定的方法来实现，这时可以通过自定义校验方法来实现。
开发者可以通过$.validator.addMethod()来添加自定义的校验方法，然后在规则中使用该方法进行校验。
4. 校验提示信息除了校验规则外，表单校验还需要提供相应的提示信息，以便用户知道输入的数据是否合法。
jQuery中使用validate插件校验表单功能
jQuery中使⽤validate插件校验表单功能⼀.功能效果⼆.部分特殊规则2.1 错误信息位置更改在表单某选项中增加代码<label class="error" for="表单中选项的name"></label>例如 : 性别必选<td><input type="radio" id="male" value="m" name="sex"/>男<input type="radio" id="female" value="f" name="sex"/>⼥<!--这⾥设置表单校验错误信息的显⽰位置--><label class="error" for="sex"></label></td>2.2 ⾝份证验证在<script>标签中 , 增加⾝份证格式验证的⾃定义规则/*⾝份证格式验证*/$.validator.addMethod("card", function (value, element, params) {var reg = /^\d{15}(\d{2}[\dX])?$/i;return reg.test(value);}, "idcard error");在rule和message中增加相应的规则判定$("#empForm").validate({rules: {idcard: {card: true}},messages: {idcard: {card: "请输⼊有效⾝份证号"}}});2.3 ⼿机号验证在<script>标签中 , 增加⼿机号格式验证的⾃定义规则/*⼿机号格式验证*/$.validator.addMethod("phone", function (value, element, params) {var reg = /^1[34578]\d{9}$/;return reg.test(value);}, "phone error");在rule和message中增加相应的规则判定$("#empForm").validate({rules: {phone: {phone: true}},messages: {phone: {phone: "请输⼊有效⾝份证号"}}});三.整体代码<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>我的jquery表单校验页⾯</title><style type="text/css">h1 {text-align: center;}table {width: 80%;margin: 0 auto;border-collapse: collapse;}td {padding: 10px 14px;border: 1px solid #999;}.error {color: red;}</style></head><body><h1>员⼯信息录⼊</h1><form name="empForm" id="empForm" method="get" action="#"><table><tr><td>真实姓名(不能为空 ,没有其他要求)</td><td><input type="text" id="realname" name="realname"/></td></tr><tr><td>登录名(登录名不能为空,长度应该在5-8之间:</td><td><input type="text" id="username" name="username"/></td></tr><tr><td>密码(不能为空,长度6-12之间):</td><td><input type="password" id="pwd" name="pwd"/></td></tr><tr><td>重复密码密码(不能为空,长度6-12之间):</td><td><input type="password" id="pwd2" name="pwd2"/></td></tr><tr><td>性别(必选其⼀)</td><td><input type="radio" id="male" value="m" name="sex"/>男<input type="radio" id="female" value="f" name="sex"/>⼥<!--这⾥设置表单校验错误信息的显⽰位置--><label class="error" for="sex"></label></td></tr><tr><td>年龄(必填26-50):</td><td><input type="text" id="age" name="age"/></td></tr><tr><td>你的学历:</td><td><select name="edu" id="edu"><option value="">－请选择你的学历－</option><option value="a">专科</option><option value="b">本科</option><option value="c">研究⽣</option><option value="e">硕⼠</option><option value="d">博⼠</option></select></td></tr><tr><td>兴趣爱好:</td><td colspan="2"><input type="checkbox" name="hobby" id="pp" value="0"/>乒乓球 <input type="checkbox" name="hobby" id="ym" value="1"/>⽻⽑球 <input type="checkbox" name="hobby" id="sw" value="2"/>上⽹<input type="checkbox" name="hobby" id="ly" value="3"/>旅游<input type="checkbox" name="hobby" id="gw" value="4"/>购物</td></tr><tr><td align="left">电⼦邮箱(格式正确):</td><td><input type="text" id="email" name="email"/></td></tr><tr><td align="left">⾝份证(15-18,格式正确):</td><td><input type="text" id="idcard" name="idcard"/></td></tr><tr><td align="left">⼿机号(格式正确):</td><td><input type="text" id="phone" name="phone"/></td></tr><tr><td></td><td><input type="submit" id="smtBtn" value="保存"></td></tr></table></form><script src="./js/jquery-3.3.1.min.js"></script><script src="./js/jquery.validate.min.js"></script><script>/*页⾯加载完成后,开启表单验证的功能,这样每输⼊⼀个就会及时校验⼀个*/ $().ready(function () {/*校验表单项*/$("#empForm").validate({rules: {realname: {required: true},username: {required: true,rangelength: [5, 8]},pwd: {required: true,rangelength: [6, 12]},pwd2: {required: true,rangelength: [6, 12],/*重复密码需要与原密码相同的要求*/equalTo: "#pwd"},sex: {required: true},age: {required: true,range: [26, 50]},email: {email: true},idcard: {card: true},phone: {phone: true}},messages: {realname: {required: "真实姓名不能为空"},username: {required: "登录名不能为空",rangelength: "登录名长度要在5-8位之间"},pwd: {required: "密码不能为空",rangelength: "密码长度在6-12位之间"},pwd2: {required: "重复密码不能为空",rangelength: "重复密码长度在6-12位之间",equalTo: "重复密码与密码不⼀致"},sex: {required: "请选择性别"},age: {required: "年龄不能为空",range: "年龄必须在26-50岁之间"},email: {email: "请输⼊有效邮箱"},idcard: {card: "请输⼊有效⾝份证号"},phone: {phone: "请输⼊有效⼿机号"}}});});/*⾝份证格式验证*/$.validator.addMethod("card", function (value, element, params) {var reg = /^\d{15}(\d{2}[\dX])?$/i;return reg.test(value);}, "idcard error");/*⼿机号格式验证*/$.validator.addMethod("phone", function (value, element, params) {var reg = /^1[34578]\d{9}$/;return reg.test(value);}, "phone error");</script></body></html>四.validate表单校验常⽤规则总结以上所述是⼩编给⼤家介绍的jQuery中使⽤validate插件校验表单功能 ,希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
jquery表单验证大全
JQuery笔记（表单验证大全）jquery.validate.js 是 jquery 旗下的一个验证插件，借助 jquery 的优势，我们可以迅速验证一些常见的输入 , 并且可以自己扩充自己的验证方法。
举个例子，有这么一个表单：view plaincopy to clipboardprint?<form id="signupForm" method="get" action=""><fieldset><legend>Validating a complete form</legend><p><label for="firstname">Firstname</label><input id="firstname" name="firstname" class="required"/></p><p><label for="lastname">Lastname</label><input id="lastname" name="lastname" /></p><p><label for="username">Username</label><input id="username" name="username" /></p><p><label for="password">Password</label><input id="password" name="password" type="password" /></p><p><label for="confirm_password">Confirm password</label><input id="confirm_password" name="confirm_password" type="password" /></p><p><label for="email">Email</label><input id="email" name="email" /></p><p><input class="submit" type="submit" value="Submit"/></p></fieldset></form><form id="signupForm" method="get" action=""><fieldset><legend>Validating a complete form</legend><p><label for="firstname">Firstname</label><input id="firstname" name="firstname" class="required"/></p><p><label for="lastname">Lastname</label><input id="lastname" name="lastname" /></p><p><label for="username">Username</label><input id="username" name="username" /></p><p><label for="password">Password</label><input id="password" name="password" type="password" /></p><p><label for="confirm_password">Confirm password</label><input id="confirm_password" name="confirm_password" type="password" /></p><p><label for="email">Email</label><input id="email" name="email" /></p><p><input class="submit" type="submit" value="Submit"/></p></fieldset></form>在这个表单中，有名、姓、用户名、密码、确认密码和 email 。
jquery表单验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>jquery表单验证</title></head><style>.warning {color: red;}</style><script src="lib/jquery.js"></script><script src="lib/jquery.mockjax.js"></script><script src="lib/jquery.form.js"></script><script src="lib/jquery.validate.js"></script><script src="lib/jquery.metadata.js"></script><script>$().ready(function() {$("#signupForm").validate();});jQuery.extend(jQuery.validator.messages, {required: "必选字段",remote: "请修正该字段",email: "请输入正确格式的电子邮件",url: "请输入合法的网址",date: "请输入合法的日期",dateISO: "请输入合法的日期(ISO).",number: "请输入合法的数字",digits: "只能输入整数",creditcard: "请输入合法的信用卡号",equalTo: "请再次输入相同的值",accept: "请输入拥有合法后缀名的字符串",maxlength: jQuery.validator.format("请输入一个长度最多是{0} 的字符串"),minlength: jQuery.validator.format("请输入一个长度最少是{0} 的字符串"),rangelength: jQuery.validator.format("请输入一个长度介于{0} 和{1} 之间的字符串"),range: jQuery.validator.format("请输入一个介于{0} 和{1} 之间的值"),max: jQuery.validator.format("请输入一个最大为{0} 的值"),min: jQuery.validator.format("请输入一个最小为{0} 的值")});</script><script>function dosubmit() {jQuery.validator.addMethod("telphoneCheck", function(value, element) {value=$.trim(value);var checkRules = /^(1[3|4|5|8][0-9]\d{8})$/;return this.optional(element) || (checkRules.test(value));}, "手机号码不合法<br/>");if(!$("#signupForm").valid()){return ;}document.getElementById("signupForm").submit();}</script><body><form name="fromPage" id="signupForm" action="login.action"><div align="center"><div><label>密码：</label><span><input name="passwords" type="text" style="width:200px; height:20px" class="{required:true,minlength:5}"/> <br/></span></div><br/><div><label>姓名：</label><span><input name="name" type="text" style="width:200px; height:20px" class="{required:true}"/><br/></span></div><br/><div><label>年龄: </label><span><input name="age" type="text" style="width:200px; height:20px" class="required"/></span></div ><br/><div><label style="margin-left: -30px;">手机号码:</label><span ><input name="sex" type="text" style="width:200px; height:20px" class="{required:true,telphoneCheck:true,messages:{required:'请填写手机号码'}}"/></span></div><br/><div><label>QQ号：</label><span><input name="QQ" type="text"style="width:200px; height:20px" class="required"/></span></div><br/><div><label>邮箱：</label><span><input name="email" type="text" style="width:200px; height:20px" class="required email"/></span></div><br/><div style="line-height: 20px;"><label style="">简介：</label><span><textarea name="text" style="width:200px; height:200px" class="required"></textarea></span></div><br/><label>下拉列表选项：</label><select name="select" style="width:270px; height:20px" class="required"><option value="1">第一项</option><option value="2">第二项</option><option value="2">第三项</option></select> <br /><input type="button" value="提交" onclick="dosubmit()" /></div></form></body></html>。
jquery实现简单的表单验证
jquery实现简单的表单验证jquery如何实现简单的表单验证，我们先跟⼤家分享⼀下实现思路。
⼤概思路:先为每⼀个required添加必填的标记，⽤each()⽅法来实现。
在each()⽅法中先是创建⼀个元素，然后通过append()⽅法将创建的元素加⼊到⽗元素后⾯。
这⾥⾯的this⽤的很精髓，每⼀次的this都对应着相应的input元素，然后获取相应的⽗元素。
然后为input元素添加失去焦点事件。
然后进⾏⽤户名、邮件的验证。
这⾥⽤了⼀个判断is()，如果是⽤户名，做相应的处理，如果是邮件做相应的验证。
在jQuery框架中，也可以适当的穿插⼀写原汁原味的javascript代码。
⽐如验证⽤户名中就有this.value，和this.value.length。
对内容进⾏判断。
然后进⾏的是邮件的验证，⽤到了正则表达式。
然后为input元素添加keyup事件与focus事件，就是在keyup时也要做⼀下验证，调⽤blur事件就⾏了。
⽤triggerHandler()触发器，触发相应的事件。
最后提交表单时做统⼀验证，做好整体与细节的处理。
如果是必填的，则加红星标识。
jQuery部分：<script type="text/javascript">//<![CDATA[$(function(){$("form :input.required").each(function(){var $required = $("<strong class='high'> *</strong>"); //创建元素$(this).parent().append($required); //然后将它追加到⽂档中});//⽂本框失去焦点后$('form :input').blur(function(){var $parent = $(this).parent();$parent.find(".formtips").remove();//验证⽤户名if( $(this).is('#username') ){if( this.value=="" || this.value.length < 6 ){var errorMsg = '请输⼊⾄少6位的⽤户名.';$parent.append('<span class="formtips onError">'+errorMsg+'</span>');}else{var okMsg = '输⼊正确.';$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');}}//验证邮件if( $(this).is('#email') ){if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){var errorMsg = '请输⼊正确的E-Mail地址.';$parent.append('<span class="formtips onError">'+errorMsg+'</span>');}else{var okMsg = '输⼊正确.';$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');}}}).keyup(function(){$(this).triggerHandler("blur");}).focus(function(){$(this).triggerHandler("blur");});//end blur//提交，最终验证。
jquery.validate.js的Validate表单验证
jquery.validate.js的Validate表单验证validate⼀、 validate的使⽤步骤1. 引⼊jquery.min.js2. 引⼊ jquery.validate.js3. 页⾯加载后对表单进⾏验证 $("#表单id名").validate({}）4. 在validate中的rules中编写验证规则（格式如下）字段的name属性:“校验器”（tisps:⼀个输⼊框只有⼀个校验器的时候使⽤）字段的name属性:{校验器:值,校验器:值}(tips:输⼊框需要有多个校验器的时候使⽤)5. 在validate中的messages中编写提⽰信息(tips格式与rules相对应)6. 在validate中的submitHandler中编写验证通过执⾏的内容图⽰如下：案例代码如下<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script type="text/javascript" src="scripts/common/jquery.min.js"></script><script type="text/javascript" src="scripts/common/jquery.validate.js"></script<script type="text/javascript">$("#zhuce").validate({rules:{regist_username:{required:true/* remote:{type: "post",url: url,data:{userName:function () {return $("regist_username").val();}}}⽤ajax判断数据库中⽤户名是否存在*/},regist_password:{required:true,minlength:6},final_password:{equalTo:"#regist_password"}},messages:{regist_username:{required:"⽤户名不能为空"},regist_password:{required:"密码不能为空",minlength:"密码最⼩的长度为6"},final_password:{equalTo:"两次密码不⼀致"}},submitHandler: function () {//验证通过后进⾏注册register();}})</script></head><body><form id="zhuce"><dl><dt><div class='header'><h3>注 册</h3></div></dt><dt></dt><dt><div class='letter'><label for="regist_username">⽤户名: </label><input type="text" name="regist_username" id="regist_username" tabindex='5'/></div></dt><dt><div class='letter'>昵 称: <input type="text" name="nickname" id="nickname" tabindex='6'/></div></dt><dt><div class='letter'><label for="regist_password"> 密 码: </label><input type="password" name="regist_password" id="regist_password" tabindex='7'/></div></dt><dt><div class='password'><label for="final_password"> 确认密码: </label><input type="password" name="final_password" id="final_password" tabindex='8'/></div></dt><dt><div><input type="submit" name="" id="regist_button" value=' 注 册 ' tabindex='9'/> <input type="button" name="" id="back" value=' 返 回 ' tabindex='10'/></div></dt></dl></form></body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182默认校验规则序号校验类型取值描述1required true&false必须填写的字段2email“@”&“email”必须输⼊正确格式的电⼦邮件3remote url路径使⽤ajax进⾏验证4date数字正确格式⽇期 tips:ie6有bug5dateISO字符串正确格式的⽇期例如：2018-11-28，2018/11/28 tips:只验证格式，不验证有效性6number true&false合法的数字7digits true&false整数8creditcard true&false合法的信⽤卡号9equalTo JQuery表达式（eg:"#regist_password"）输⼊值必须和 #regist_password相同。
使用jQuery实现表单验证功能
使⽤jQuery实现表单验证功能5.1.5 表单验证表单作为 HTML 最重要的⼀个组成部分，⼏乎在每个⽹页上都有体现，例如⽤户提交信息、⽤户反馈信息和⽤户查询信息等，因此它是⽹站管理者与浏览者之间沟通的桥梁。
在表单中，表单验证的作⽤也是⾮常重要的，它能使表单更加灵活、美观和丰富。
以⼀个简单的⽤户注册为例。
⾸先新建⼀个表单， HTML 代码如下：<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>jQueryStudy</title><style type="text/css">.int{ height: 30px; text-align: left; width: 600px; }label{ width: 200px; margin-left: 20px; }.high{ color: red; }.msg{ font-size: 13px; }.onError{ color: red; }.onSuccess{ color: green; }</style><script type="text/javascript" src="jquery-1.10.2.js"></script></head><body><form method="post" action=""><div class="int"><label for="name">名称：</label><input type="text" id="name" class="required" /></div><div class="int"><label for="email">邮箱：</label><input type="text" id="email" class="required" /></div><div class="int"><label for="address">地址：</label><input type="text" id="personinfo" /></div><div class="int"><input type="submit" value="提交" id="send" style="margin-left: 70px;" /><input type="reset" value="重置" id="res" /></div></form><script type="text/javascript"></script></body></html>显⽰效果如图 1 所⽰。
如何用JQuery进行表单验证
如何用JQuery进行表单验证Ajax 即“AsynchronousJavascriptAndXML”(异步JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。
下面是店铺为你整理的AJAX面试题，希望对你有所帮助!可以使用jQuery的插件–jQuery-validate表单验证插件来进行表单验证例子：$(“#form”).validate({//验证规则rules:{author:{required:true,//必需非空字段minlength:2 //长度至少两字节},email:{required:true,email:true //此字段为邮件地址},url:{required:false,url:true //此字段为网址},content:{required:true,minlength:4}},//错误消息messages:{author: {required: ‘用户名必须填写’,minlength: jQuery.format(“名称至少{0}两个字节”) },email: {required: ‘邮箱必须填写,做为联系方式’,email: ‘邮箱格式不正确’},content: {required: ‘网址必须填写’,minlength: jQuery.format(“名称至少{0}两个字节”)}},submitHandler: function(form) {//ajax提交表单,需要jQuery.Form插件$(form).ajaxSubmit({dataType:’json’,success:function(res){if(res.success){$(‘.ajaxsubmit’).html(‘发表成功!’).addClass(‘ok’); $(‘textarea’).val(”);$(‘#comments’).prepend(res.msg);}else$(‘.ajaxsubmit’).html(res.msg).addClass(‘fail’);}});return false;},errorPlacement:function(error, element) {//放置错误提示消息的Elementerror.appendT o(element.parent().find(‘b’));},errorClass:’fail’,//错误消息样式highlight: function(element, errorClass) {//黄褪显示错误字段,需要jQuery.Highlight插件$(element).highlightFade({color:’yellow’,spee d:1000,iterat or:’exponential’})}});。
jQuery实现表单验证功能
jQuery实现表单验证功能jQuery表单验证实例 / 包含⽤户名、密码、住址、邮箱验证如下图别忘了引⼊jQuery框架话不多说直接先上jQuery部分代码：<script type="text/javascript">$(document).ready(function(){var tip1 = "<span class='span1'>⽤户名不能为空!</span>";//声明发⽣错误时在输⼊框后⾯添加的spanvar tip2 = "<span class='span2'>邮箱格式错误或不能为空!</span>";var tip3 = "<span class='span3'>地址不能为空!</span>";var tip4 = "<span class='span4'>密码长度不能⼩于五位且最多为⼗位 !</span>";var condition = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;//声明判定邮箱格式的条件$(".id").blur(function(){if(!$(".id").val()){//判定⽤户名⾮空$(".span1").remove();$(".id").after(tip1);}else{$(".span1").remove();}});$(".email").blur(function(){if(!condition.test($(".email").val())){//判定邮箱格式$(".span2").remove();$(".email").after(tip2);}else{$(".span2").remove();}});$(".adress").blur(function(){if(!$(".adress").val()){//判定地址⾮空$(".span3").remove();$(".adress").after(tip3);}else{$(".span3").remove();}});$(".pwd").blur(function(){if($(".pwd").val().length < 5||$(".pwd").val().length >10){//判定密码长度不能⼩于5位且不能⼤于10位$(".span4").remove();$(".pwd").after(tip4);}else{$(".span4").remove();}});$(".button").click(function(){//符合所有条件则弹出弹窗表单验证通过，如果不符合则弹出弹窗提醒⽤户更改if(!$(".id").val()||!condition.test($(".email").val())||!$(".adress").val()||$(".pwd").val().length < 5||$(".pwd").val().length >10){ alert("注册信息有误，请更改个⼈信息");}else{alert("注册成功");}})})</script>结构和样式：<div class="main_box"><div class="title">欢迎注册原魔</div><div class="box"><img alt="插图" src="./img/可莉派萌.png" class="img"><form>⽤户名:<input class="id" type="text" ><br>邮 箱:<input class="email" type="text"><br>地 址:<input class="adress" type="text"><br>密 码:<input class="pwd" type="password"><br><button type = "button" class="button">注   册</button></form></div></div>span{color:white;}body{font-family: sans-serif;}.main_box{width: 100%;height: 910px;background-color: red;background-image: linear-gradient(#e66465, #000000);}.title{font-size: 5em;color: white;width:100%;height: 100px;text-align: center;}.box{width: 1050px;height: 310px;margin: 150px auto 50px auto;padding-left: 360px;}input{height: 40px;width: 200px;border-radius: 20px;border: solid 1px #B5B5B5;margin: 10px;font-size: 1.2em;}form{color:white;font-size:1.2em;float: left;margin-left: 50px;}.button{width: 280px;height: 40px;background-color: #9781FD;border-radius: 25px;color:white;font-size: 1.3em;font-weight: 700;margin-top: 10px;}.img{width:310px;height: 310px;float: left;}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
jQuery实现表单验证及提交
jQuery实现表单验证及提交以下代码实现⽤户在提交信息时验证表单信息是否符合规定，要求必须全部信息的填写都符合规定之后才能提交数据html<div class="aaaaa" style="width: 95vw;height:70vw;margin: 0 auto;"><div style="color: red;">*请填⼊个⼈信息，完成报名</div><div class="list"><div>姓名：</div><input name="name" type="text"></div><div class="list"><div>年龄：</div><input name="age" type="text"></div><div class="list"><div>联系电话：</div><input name="tel" type="text"></div><div class="list"><div>家庭住址：</div><input name="address" type="text"></div><div id="submit" style="text-align: center;margin-top: 4vw"><div style="padding: 2vw 6vw;background-color:limegreen;color:white;font-size:5vw;letter-spacing:1vw;border-radius: 1vw;">确认报名</div></div></div>css.list{display: flex;flex-direction: row;justify-content: space-around;align-items:center;border-bottom: 1px solid #e4e4e4;padding: 2vw 0;font-size: 5vw;}.list div{width: 30%;text-align: right;}.list input{width: 70%;height:8vw;border-style: none;background-color: transparent;}jquery$('#submit').click(function () {var name = $('[name=name]').val();var age = $('[name=age]').val();var tel = $('[name=tel]').val();var address = $('[name=address]').val();//验证姓名if (name != '') {var names = parseInt(name);//验证是否为数字if(isNaN(names)){if(/[@#\$%\^&\*]+/gi.test(name)) { //验证是否含有特殊字符alert('姓名不能带有特殊字符')return}if (name.length > 6){alert('姓名长度不符合规定，请输⼊六个或以下汉字')return}} else{alert("姓名不能是数字");return}}else{alert('⽤户名不能为空')return}//验证年龄if (age != '') {var ages = parseInt(age);//验证是否为数字，如果变量age是字符类型的数则转换为int类型如果不是则ages为NaNif(!isNaN(ages)){if (ages > 120 || ages<0){//验证年龄字段是否合法，这⾥取0-120岁alert('请输⼊正确的年龄')return}} else{alert("'"+age+"'" +"不是数字");return}}else{alert('年龄不能为空')return}//验证联系电话if (tel != '') {var tels = parseInt(tel);//验证是否为数字if(!isNaN(tels)){var reg = /(1[3-9]\d{9}$)/;if (!reg.test(tel)) { //验证⼿机号码格式alert("请输⼊正确格式的⼿机号码！");return false;}} else{alert("联系电话必须是数字");return}}else{alert('联系电话不能为空')return}//验证地址if (address != '') {var addresss = parseInt(address);//验证是否为数字if(isNaN(addresss)){if (address.length < 3){alert('地址长度不符合规定，请输⼊⾄少3个汉字')return}} else{alert("地址不能是数字");return}}else{alert('地址不能为空')return}$.ajax({url: "?op=submitApply", // 提交到controller的url路径，在本页⾯就直接⽤?代替⽂件名即可，省略⽂件名，别的页⾯则需写全路径type: "post", // 提交⽅式data: {"name": name,"age":age,'tel':tel,'address':address}, // data为String类型，必须为 Key/Value 格式。
jquery表单验证,jquery.validate全攻略
jquery表单验证，jquery.validate全攻略jquery表单验证，jquery.validate全攻略文章分类:Web前端一、准备工作需要JQuery版本：1.2.6+, 兼容 1.3.2官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/最新版本：1.5.5本地下载：jquery.validate.zip二、默认校验规则Java代码(1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true 必须输入正确格式的日期(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性(7)number:true 必须输入合法的数字(负数，小数)(8)digits:true 必须输入整数(9)creditcard: 必须输入合法的信用卡号(10)equalTo:"#field" 输入值必须和#field相同(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)(14)rangelength:[5,10] 输入长度必须介于5 和10 之间的字符串")(汉字算一个字符)(15)range:[5,10] 输入值必须介于5 和10 之间(16)max:5 输入值不能大于5(17)min:10 输入值不能小于10(1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true 必须输入正确格式的日期(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性(7)number:true 必须输入合法的数字(负数，小数)(8)digits:true 必须输入整数(9)creditcard: 必须输入合法的信用卡号(10)equalTo:"#field" 输入值必须和#field相同(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)(14)rangelength:[5,10] 输入长度必须介于5 和10 之间的字符串")(汉字算一个字符)(15)range:[5,10] 输入值必须介于5 和10 之间(16)max:5 输入值不能大于5(17)min:10 输入值不能小于10三、默认的提示Js代码messages : {required : "This field is required.",remote : "Please fix this field.",email : "Please enter a valid email address.",url : "Please enter a valid URL.",date : "Please enter a valid date.",dateISO : "Please enter a valid date (ISO).",dateDE : "Bitte geben Sie ein g眉ltiges Datum ein.", number : "Please enter a valid number.",numberDE : "Bitte geben Sie eine Nummer ein.",digits : "Please enter only digits",creditcard : "Please enter a valid credit card number.", equalTo : "Please enter the same value again.",accept : "Please enter a value with a valid extension.", maxlength : $.validator.format("Please enter no more than {0} characters."),minlength : $.validator.format("Please enter at least {0} characters."), rangelength : $.validator.format("Please enter a value between {0} and {1} characters long."),range : $.validator.format("Please enter a value between {0} and {1}."),max : $.validator.format("Please enter a value less than or equal to {0}."),min : $.validator.format("Please enter a value greater than or equal to {0}.")},messages : {required : "This field is required.",remote : "Please fix this field.",email : "Please enter a valid email address.",url : "Please enter a valid URL.",date : "Please enter a valid date.",dateISO : "Please enter a valid date (ISO).",dateDE : "Bitte geben Sie ein g眉ltiges Datum ein.", number : "Please enter a valid number.",numberDE : "Bitte geben Sie eine Nummer ein.",digits : "Please enter only digits",creditcard : "Please enter a valid credit card number.", equalTo : "Please enter the same value again.",accept : "Please enter a value with a valid extension.", maxlength : $.validator.format("Please enter no more than {0} characters."), minlength : $.validator.format("Please enter at least {0} characters."), rangelength : $.validator.format("Please enter a value between {0} and {1} characters long."),range : $.validator.format("Please enter a value between {0} and {1}."),max : $.validator.format("Please enter a value less than or equal to {0}."),min : $.validator.format("Please enter a value greater than or equal to {0}.") },如需要修改，可在js代码中加入：Js代码jQuery.extend(jQuery.validator.messages, {required: "必选字段",remote: "请修正该字段",email: "请输入正确格式的电子邮件",url: "请输入合法的网址",date: "请输入合法的日期",dateISO: "请输入合法的日期(ISO).",number: "请输入合法的数字",digits: "只能输入整数",creditcard: "请输入合法的信用卡号",equalTo: "请再次输入相同的值",accept: "请输入拥有合法后缀名的字符串",maxlength: jQuery.validator.format("请输入一个长度最多是{0} 的字符串"),minlength: jQuery.validator.format("请输入一个长度最少是{0} 的字符串"),rangelength: jQuery.validator.format("请输入一个长度介于{0} 和{1} 之间的字符串"),range: jQuery.validator.format("请输入一个介于{0} 和{1} 之间的值"),max: jQuery.validator.format("请输入一个最大为{0} 的值"),min: jQuery.validator.format("请输入一个最小为{0} 的值")});jQuery.extend(jQuery.validator.messages, {required: "必选字段",remote: "请修正该字段",email: "请输入正确格式的电子邮件",url: "请输入合法的网址",date: "请输入合法的日期",dateISO: "请输入合法的日期(ISO).",number: "请输入合法的数字",digits: "只能输入整数",creditcard: "请输入合法的信用卡号",equalTo: "请再次输入相同的值",accept: "请输入拥有合法后缀名的字符串",maxlength: jQuery.validator.format("请输入一个长度最多是{0} 的字符串"),minlength: jQuery.validator.format("请输入一个长度最少是{0} 的字符串"),rangelength: jQuery.validator.format("请输入一个长度介于{0} 和{1} 之间的字符串"),range: jQuery.validator.format("请输入一个介于{0} 和{1}之间的值"),max: jQuery.validator.format("请输入一个最大为{0} 的值"), min: jQuery.validator.format("请输入一个最小为{0} 的值") });推荐做法，将此文件放入messages_cn.js中，在页面中引入四、使用方式1.将校验规则写到控件中Html代码<script src="../js/jquery.js"type="text/javascript"></script><script src="../js/jquery.validate.js"type="text/javascript"></script><script src="./js/jquery.metadata.js"type="text/javascript"></script>$().ready(function() { $("#signupForm").validate();});<form id="signupForm" method="get" action=""><p><label for="firstname">Firstname</label><input id="firstname" name="firstname" class="required" /></p><p><label for="email">E-Mail</label><input id="email" name="email" class="required email"/></p><p><label for="password">Password</label><input id="password" name="password" type="password" class="{required:true,minlength:5}" /></p><p><label for="confirm_password">确认密码</label> <input id="confirm_password" name="confirm_password" type="password"class="{required:true,minlength:5,equalTo:'#password'}" /> </p><p><input class="submit" type="submit" value="Submit"/> </p></form><script src="../js/jquery.js"type="text/javascript"></script><script src="../js/jquery.validate.js"type="text/javascript"></script><script src="./js/jquery.metadata.js"type="text/javascript"></script>$().ready(function() { $("#signupForm").validate();});<form id="signupForm" method="get" action=""><p><label for="firstname">Firstname</label><input id="firstname" name="firstname" class="required" /></p><p><label for="email">E-Mail</label><input id="email" name="email" class="required email"/></p><p><label for="password">Password</label><input id="password" name="password" type="password" class="{required:true,minlength:5}" /></p><p><label for="confirm_password">确认密码</label> <input id="confirm_password" name="confirm_password"type="password"class="{required:true,minlength:5,equalTo:'#password'}" /> </p><p><input class="submit" type="submit" value="Submit"/> </p></form>使用class="{}"的方式，必须引入包：jquery.metadata.js可以使用如下的方法，修改提示内容：class="{required:true,minlength:5,messages:{required:'请输入内容'}}"在使用equalTo关键字时，后面的内容必须加上引号，如下代码：class="{required:true,minlength:5,equalTo:'#password'}"另外一个方式，使用关键字：meta（为了元数据使用其他插件你要包装你的验证规则在他们自己的项目中可以用这个特殊的选项）Tell the validation plugin to look inside a validate-property in metadata for validation rules.例如：Html代码meta: "validate"<input id="password" name="password" type="password" class="{validate:{required:true,minlength:5}}" />meta: "validate"<input id="password" name="password" type="password" class="{validate:{required:true,minlength:5}}" />再有一种方式：$.metadata.setType("attr", "validate");这样可以使用validate="{required:true}"的方式，或者class="required"，但class="{required:true,minlength:5}"将不起作用2.将校验规则写到代码中$().ready(function() {$("#signupForm").validate({rules: {firstname: "required",email: {required: true,email: true},password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"}},messages: {firstname: "请输入姓名",email: {required: "请输入Email地址",email: "请输入正确的email地址"},password: {required: "请输入密码",minlength: jQuery.format("密码不能小于{0}个字符") },confirm_password: {required: "请输入确认密码",minlength: "确认密码不能小于5个字符",equalTo: "两次输入密码不一致不一致"}}});});//messages处，如果某个控件没有message，将调用默认的信息<form id="signupForm" method="get" action=""><p><label for="firstname">Firstname</label><input id="firstname" name="firstname" /></p><p><label for="email">E-Mail</label><input id="email" name="email" /></p><p><label for="password">Password</label><input id="password" name="password" type="password" /></p><p><label for="confirm_password">确认密码</label> <input id="confirm_password" name="confirm_password" type="password" /></p><p><input class="submit" type="submit" value="Submit"/> </p></form>required:true 必须有值required:"#aa:checked"表达式的值为真，则需要验证required:function(){}返回为真，表时需要验证后边两种常用于，表单中需要同时填或不填的元素五、常用方法及注意问题1.用其他方式替代默认的SUBMIT$().ready(function() { $("#signupForm").validate({submitHandler:function(form){alert("submitted");form.submit();}});});可以设置validate的默认值，写法如下：$.validator.setDefaults({submitHandler: function(form){ alert("submitted!");form.submit(); }});如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()2.debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便$().ready(function() {$("#signupForm").validate({debug:true});});如果一个页面中有多个表单，用$.validator.setDefaults({debug: true})3.ignore：忽略某些元素不验证ignore: ".ignore"4.errorPlacement：Callback Default: 把错误信息放在验证的元素后面指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面errorPlacement: function(error, element) {error.appendTo(element.parent());}//示例：<tr><td class="label"><label id="lfirstname"for="firstname">First Name</label></td><td class="field"><input id="firstname"name="firstname" type="text" value="" maxlength="100"/></td><td class="status"></td></tr><tr><td style="padding-right: 5px;"><input id="dateformat_eu" name="dateformat" type="radio" value="0" /><label id="ldateformat_eu"for="dateformat_eu">14/02/07</label></td><td style="padding-left: 5px;"><input id="dateformat_am" name="dateformat" type="radio" value="1" /><label id="ldateformat_am"for="dateformat_am">02/14/07</label></td><td></td></tr><tr><td class="label"> </td><td class="field" colspan="2"><div id="termswrap"><input id="terms" type="checkbox" name="terms" /><label id="lterms" for="terms">I have read and accept the Terms of Use.</label></div></td></tr>errorPlacement: function(error, element) {if ( element.is(":radio") )error.appendTo( element.parent().next().next() );else if ( element.is(":checkbox") )error.appendTo ( element.next() );elseerror.appendTo( element.parent().next() );}代码的作用是：一般情况下把错误信息显示在中，如果是radio显示在中，如果是checkbox显示在内容的后面errorClass：String Default: "error"指定错误提示的css类名，可以自定义错误提示的样式errorElement：String Default: "label"用什么标签标记错误，默认的是label你可以改成emerrorContainer：Selector显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大errorContainer: "#messageBox1,#messageBox2"errorLabelContainer：Selector把错误信息统一放在一个容器里面。
jquery.validate.js表单验证jquery.validate.js的用法
jquery.validate.js表单验证jquery.validate.js的⽤法jquery.validate.js这个插件已经⽤了2年多了，是⼀个不可多得的表单验证最⽅便快捷的插件。
基于jquery的⼩插件，基本⼩⽩⼀学就会上⼿，对于项⽬表单页⾯⽐较多，元素⽐较多的校验，该插件基本分分钟就解决完。
本来想好好总结⼀下的。
暂放demo。
想参考⼀下这篇楼主的博⽂。
感觉总结的太好了！他的⽤法是结合jquery.validate.js写法基本是这个样⼦的class={};前端写法⽆限多，这⾥就不细细区别那种⽤法更好，没那精⼒。
其实引⽤这个写法的主要原因是他的写法会帮助我们动态校验⾃动⽣成的表格元素，总所周知啊：jquery.validate.js这个插件是基于表单的name名称进⾏校验的，⽽对于动态⽣成的表单这个name就有点困难困难了。
（除⾮你们想到name[i],i++这种低级想法。
因为后端基本不会给name起name1,name2,name3这种名字的，哪家也不这么在数据库⾥玩。
除⾮⾃⼰本地的同学们，哈哈哈！）废话少说。
这⾥就显出jquery.metadata.js他的⾼尚之品质！以下是我项⽬中的⼀个⼩代码$(".add).on("click",function(){var str='<tr class="trsec">'+'<td><select name="assessVoList[][productMetadataId]" id="" class="risk">'+options+'</select></td>'+'<td><select name="assessVoList[][LossTargetName]" class="subject">'+LossTargetNameid+'</select></td>'+'<td><select name="assessVoList[][LossTargetType]" class="sslb">'+lossFeeTypeListid+'</select></td>'+'<td><input type="text" value="'+item.losshow+'" placeholder="损失程度" name="assessVoList[][losshow]" class="losshow {required:true}"/></td>'+'<td><a class="sbtn delete deleteone" data-toggle="modal" data-target=".mydelete">删除</a></td>'+'</tr>';$(".two").find("tbody").append(str);})点击按钮，给表格动态增加⼀条数据时，对表单⾥的元素进⾏校验。
jquery实现表单验证简单实例演示
jquery实现表单验证简单实例演⽰本⽂实例讲述了jquery实现表单验证代码。
分享给⼤家供⼤家参考。
具体如下：运⾏效果截图如下：具体代码如下：直接上插件实现代码了，围绕代码进⾏讲解⽐较容易点：/*描述：基于jquery的表单验证插件。
*/(function ($) {$.fn.checkForm = function (options) {var root = this; //将当前应⽤对象存⼊rootvar isok = false; //控制表单提交的开关var pwd1; //密码存储var defaults = {//图⽚路径img_error: "img/error.gif",img_success: "img/success.gif",//提⽰信息tips_success: '', //验证成功时的提⽰信息，默认为空tips_required: '不能为空',tips_email: '邮箱地址格式有误',tips_num: '请填写数字',tips_chinese: '请填写中⽂',tips_mobile: '⼿机号码格式有误',tips_idcard: '⾝份证号码格式有误',tips_pwdequal: '两次密码不⼀致',//正则reg_email: /^\w+\@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/i, //验证邮箱reg_num: /^\d+$/, //验证数字reg_chinese: /^[\u4E00-\u9FA5]+$/, //验证中⽂reg_mobile: /^1[3458]{1}[0-9]{9}$/, //验证⼿机reg_idcard: /^\d{14}\d{3}?\w$/ //验证⾝份证};//不为空则合并参数if(options)$.extend(defaults, options);//获取（⽂本框，密码框，多⾏⽂本框），当失去焦点时，对其进⾏数据验证$(":text,:password,textarea", root).each(function () {$(this).blur(function () {var _validate = $(this).attr("check"); //获取check属性的值if (_validate) {var arr = _validate.split(' '); //⽤空格将其拆分成数组for (var i = 0; i < arr.length; i++) {//逐个进⾏验证，不通过跳出返回false,通过则继续if (!check($(this), arr[i], $(this).val()))return false;elsecontinue;}}})})//表单提交时执⾏验证,与上⾯的⽅法基本相同，只不过是在表单提交时触发function _onSubmit() {isok = true;$(":text,:password,textarea", root).each(function () {var _validate = $(this).attr("check");if (_validate) {var arr = _validate.split(' ');for (var i = 0; i < arr.length; i++) {if (!check($(this), arr[i], $(this).val())) {isok = false; //验证不通过阻⽌表单提交，开关falsereturn; //跳出}}}});}//判断当前对象是否为表单，如果是表单，则提交时要进⾏验证if (root.is("form")) {root.submit(function () {_onSubmit();return isok;})}//验证⽅法var check = function (obj, _match, _val) { //根据验证情况，显⽰相应提⽰信息，返回相应的值switch (_match) {case 'required':return _val ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_required, false);case 'email':return chk(_val, defaults.reg_email) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_email, false);case 'num':return chk(_val, defaults.reg_num) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_num, false);case 'chinese':return chk(_val, defaults.reg_chinese) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_chinese, false);case 'mobile':return chk(_val, defaults.reg_mobile) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_mobile, false);case 'idcard':return chk(_val, defaults.reg_idcard) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_idcard, false);case 'pwd1':pwd1 = _val; //实时获取存储pwd1值return true;case 'pwd2':return pwdEqual(_val, pwd1) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_pwdequal, false);default:return true;}}//判断两次密码是否⼀致(返回bool值)var pwdEqual = function(val1, val2) {return val1 == val2 ? true : false;}//正则匹配(返回bool值)var chk = function (str, reg) {return reg.test(str);}//显⽰信息var showMsg = function (obj, msg, mark) {$(obj).next("#errormsg").remove();//先清除var _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_error + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>"; if (mark)_html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_success + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>"; $(obj).after(_html);//再添加return mark;}}})(jQuery);先来说⼀说实现原理：⾸先定义好正则，和相应的提⽰信息， 加上⾃定义check属性， 然后获取check属性的值，多个值⽤空格分开。
jQueryformValidator3.3表单验证文档说明
jQueryformValidator3.3表单验证文档说明jQuery formValidator3.3表单验证文档说明一、前言jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。
你可以划分多个校验组，每个组的校验都是互不影响。
对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）脚本控制。
二、验证方式1、inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）；2、compareValidator（提供2个对象的比较，目前可以比较字符串和数值型;3、ajaxValidator（通过ajax到服务器上做数据校验）；4、regexValidator（提供可扩展的正则表达式库）;5、functionValidator（可使用外部函数来做校验）；三、如何引用到页面1、加载jQuery类库；2、加载插件的样式库//前面两步不分先后，如果你是自动构建提示层，请加载validatorAuto.css；3、加载验证插件//这步引用必须在jQuery-1.4.2.js之后；4、加载扩展库//建议将所有有关正则验证方面的格式，其它扩展的验证函数统一写到该文件中；四、具体实战界面效果：五、属性参照initConfig:参数详解主要是设置全局参数和判断是否通过校验函数名函数说明$.formValid ator.initCon fig 参数：配置类型属性默认值说明validatorgroup"1" 你要针对哪个组进行配置formid "" 要自动注册pageIsValid函数的表单ID号alertmessagefalse 是否弹出窗口autotip false 是否自动构建提示层errorfocustrue发生错误的时候，第一个出错控件是否获得焦点forcevalid true 是否一直输入正确为止才允许离开焦点wideword true 是否把一个全角字符当做2个长度onsuccess null 该组校验通过后的回调函数,返回false，阻止表单的提交submitoncefalse 校验通过后，是否灰掉所有的提交按钮onerror null该组校验失败后的回调函数，有两个参数参数1一个校验没有通过的错误信息参数2 一个校验没有通过的元素对象debug false 是否处于调试模式。
jquery表单验证插件（jquery.validate.js）的3种使用方式
jquery表单验证插件（jquery.validate.js）的3种使⽤⽅式jquery 验证⾮常简单，下⾯总结常⽤的三种⽅式：第⼀种⽅式：也是⽐较标准的⽅式：⾸先引⼊jquery 插件和 jquery 验证插件：第⼀步：引⼊插件复制代码代码如下:<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script>第⼆步：定义表单的错误输出：复制代码代码如下:<style type="text/css">#frm label.error {color: Red;}</style>第三步：添加错误处理⽅法；jquery验证，需要有：1：定义验证⽅法2：添加验证规则下⾯贴出常⽤的验证⼩例⼦，⼀看就明⽩了。
先看效果图：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script><style type="text/css">#frm label.error {color: Red;}</style></head><script type="text/javascript">$(document).ready(function(){$("#clickme").click(function(){alert("Hello World");});$( "#frm" ).validate({rules: {username: {required: true,minlength: 4,maxlength: 20,byteMaxLength:20,valiEnglish:true},postcode: {postcodeVal:true},number: {byteMaxLength:5,numFormat:5},identifier: {sfzhValidate:true}},messages: {username: {required: "请输⼊⽤户名4--20个英⽂字符",minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!")},number: {numFormat: $.format("请输⼊{0}数字")}}});jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod("numFormat",function(value,element,param){return this.optional(element) || /^\d*$/.test(value);}//,$.validator.format("请输⼊数字{0}位以内"));//number(9,3)jQuery.validator.addMethod("numFormat63",function(value,element){return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);},$.validator.format("请输⼊合法数字,精度格式123456.0"));jQuery.validator.addMethod("postcodeVal",function(value,element){return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);},$.validator.format("请输⼊合法的邮编"));jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);},$.validator.format("请输⼊字母或数字"));jQuery.validator.addMethod("sfzhValidate",function(value,element){return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);},$.validator.format("请输⼊合法⾝份证号"));jQuery.validator.addMethod("valiEnglish",function(value,element){return this.optional(element) || /^[a-zA-Z ]*$/.test(value);},$.validator.format("请输⼊字母或者空格"));});</script><body><form id="frm" name="frm" method="post" action=""><label>⽤户名:<input type="text" name="username" id="username" /></label><p><label>邮编 :<label></label></label><label><input type="text" name="postcode" id="postcode" /><br /></label></p><p><label>数字 :<input type="text" name="number" id="number" /></label><br /><label>⾝份证号：<input type="text" name="identifier" id="identifier" /></label> <label><input type="button" name="clickme" id="clickme" value="click me" /></label></p></form></body></html>这是⼀个完整的验证⽰例，关于引⼊的代码已经上传，可以下⾯讲解其中的重点⽅法：jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod() ⽅法，有三个参数,第⼀个参数： “byteMaxLength” 是定义⽅法名，必须保证⽅法名唯⼀，是⼀个identifier标志。
详解jqueryvalidate实现表单验证（正则表达式）
详解jqueryvalidate实现表单验证（正则表达式）⼀、⽬的为了更好地实现⼈机交互，使⽤jQuery封装库中的validate插件，在⽤户填写表单时，可以快速地对⽤户填写的数据进⾏验证，并做出反馈。
⼆、validate插件简介validate()是插件的核⼼⽅法，定义了基本的校验规则和⼀些有⽤的配置项。
rule:设置表单的验证规则；messages:设置表单不符合验证规则的提⽰信息；debug:如果这个参数为true,那么表单还会提交，只进⾏检查，调试时⼗分⽅便。
required:必填minlength:最⼩长度maxlength:最⼤长度rangelength:长度范围，以数组呈现[2，10]，表⽰表单输⼊长度为2到10位remote:可以通过发现GET或者POST请求进⾏远程验证，与Ajax的验证进⾏⽐较。
就是通过ajax实现的｛url:type:默认为GET请求data:发送的数据｝发送GET请求例⼦：check:{required:true,remote:{url:"__CONTROLLER__/check?check="+$("#icode").val//__CONTROLLER__表⽰当前控制器}}基本的校验规则序号规则描述1required:true必须输⼊的字段。
2remote:"check.php"使⽤ ajax ⽅法调⽤ check.php 验证输⼊值。
3email:true必须输⼊正确格式的电⼦邮件。
4url:true必须输⼊正确格式的⽹址。
5date:true必须输⼊正确格式的⽇期。
⽇期校验 ie6 出错，慎⽤。
6dateISO:true必须输⼊正确格式的⽇期（ISO），例如：2009-06-23，1998/01/22。
只验证格式，不验证有效性。
7number:true必须输⼊合法的数字（负数，⼩数）。
8digits:true必须输⼊整数。
jQuery实现表单验证
jQuery实现表单验证使⽤jQuery实现表单验证，供⼤家参考，具体内容如下register.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>注册</title><!--导⼊jQuery--><script src="js/jquery-3.3.1.js"></script><!--进⾏表单校验--><script>/*表单校验：1.⽤户名：单词字符，长度8到20位2.密码：单词字符，长度8到20位3.email：邮件格式4.姓名：⾮空5.⼿机号：⼿机号格式6.出⽣⽇期：⾮空*/// 校验⽤户名// 单词字符，长度8到20位function checkUsername() {// 1.获取⽤户名值var username = $("#username").val();// 2.定义校验正则var reg_username = /^\w{8,20}$/;// 3.判断是否满⾜校验要求，并给出提⽰信息var flag = reg_username.test(username);if (flag) {// ⽤户名合法$("#username").css("border", "");} else {// ⽤户名⾮法，加⼀个红⾊边框$("#username").css("border", "1px solid red");}// 4.返回是否通过校验return flag;}// 校验密码function checkPassword() {//1.获取密码值var password = $("#password").val();//2.定义正则var reg_password = /^\w{8,20}$/;//3.判断，给出提⽰信息var flag = reg_password.test(password);if (flag) {//密码合法$("#password").css("border", "");} else {//密码⾮法,加⼀个红⾊边框$("#password").css("border", "1px solid red");}// 4.返回校验是否通过return flag;}// 校验邮箱function checkEmail() {//1.获取邮箱var email = $("#email").val();//2.定义正则 itcast@var reg_email = /^\w+@\w+\.\w+$/;//3.判断var flag = reg_email.test(email);if (flag) {$("#email").css("border", "");} else {$("#email").css("border", "1px solid red");}// 4.返回校验是否通过return flag;}// 校验姓名function checkName() {// 1.获取姓名var name = $("#name").val();// 2.判断⾮空并返回校验是否通过if (typeof name == "undefined" || name == null || name == "") {$("#name").css("border", "1px solid red");return false;} else {$("#name").css("border", "");return true;}}// 校验⼿机号function checkTelephone() {// 1.获取⼿机号var telephone = $("#telephone").val();// 2.定义正则var reg_tel = /^1(3|4|5|6|7|8|9)\d{9}$/;// 3.判断var flag = reg_tel.test(telephone);if (flag) {$("#telephone").css("border", "");} else {$("#telephone").css("border", "1px solid red");}// 4.返回校验是否通过return flag;}// 校验出⽣⽇期function checkBirthday() {// 1.获取出⽣⽇期var birthday = $("#birthday").val();// 2.判断⾮空并返回校验是否通过if (typeof birthday == "undefined" || birthday == null || birthday == "") {$("#name").css("border", "1px solid red");return false;} else {$("#name").css("border", "");return true;}}// 进⾏校验$(function () {//当表单提交时，调⽤所有的校验⽅法$("#registerForm").submit(function () {// 如果这个⽅法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交// 1.发送数据到服务器if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() && checkBirthday()) { // 校验通过,发送ajax请求，提交表单的数据 username=zhangsan&password=123$.post("registerServlet", $(this).serialize(), function (data) {if (data.flag) {// 注册成功，跳转到成功页⾯alert("注册成功！");} else {//注册失败,给errorMsg添加提⽰信息$("#errorMsg").html(data.errorMsg);}});}//2.不让页⾯跳转return false;});//当某⼀个组件失去焦点是，调⽤对应的校验⽅法$("#username").blur(checkUsername);$("#password").blur(checkPassword);$("#email").blur(checkEmail);$("#name").blur(checkName);$("#telephone").blur(checkTelephone);$("#birthday").blur(checkBirthday);})</script></head><body><div><p>⽤户注册</p><!--注册表单--><div id="errorMsg" style="color:red;text-align: center"></div><form id="registerForm" action="registerServlet" method="post"><table style="margin-top: 25px;"><tr><td class="td_left"><label for="username">⽤户名</label></td><td class="td_right"><input type="text" id="username" name="username" placeholder="请输⼊账号"></td></tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><input type="text" id="password" name="password" placeholder="请输⼊密码"></td></tr><tr><td class="td_left"><label for="email">Email</label></td><td class="td_right"><input type="text" id="email" name="email" placeholder="请输⼊Email"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" id="name" name="name" placeholder="请输⼊真实姓名"></td></tr><tr><td class="td_left"><label for="telephone">⼿机号</label></td><td class="td_right"><input type="text" id="telephone" name="telephone" placeholder="请输⼊您的⼿机号"> </td></tr><tr><td class="td_left"><label for="sex">性别</label></td><td class="td_right gender"><input type="radio" id="sex" name="sex" value="男" checked> 男<input type="radio" name="sex" value="⼥"> ⼥</td></tr><tr><td class="td_left"><label for="birthday">出⽣⽇期</label></td><td class="td_right"><input type="date" id="birthday" name="birthday" placeholder="年/⽉/⽇"></td></tr><tr><td class="td_left"></td><td class="td_right check"><input type="submit" class="submit" value="注册"><span id="msg" style="color: red;"></span></td></tr></table></form></div></body><script></script></html>后台处理代码也可以不看，只是前后端进⾏交互需要，RegisterServlet.javapackage com.demo.servlet;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.Iterator;import java.util.Map;import java.util.Set;@WebServlet("/registerServlet")public class RegisterServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { Map<String, String[]> parameterMap = req.getParameterMap();Set<String> keySet = parameterMap.keySet();Iterator<String> iterator = keySet.iterator();while (iterator.hasNext()) {String key = iterator.next();System.out.println(key + ":" + parameterMap.get(key)[0]);}// String str="{flag:true,errorMsg:'注册失败'}";// 错误范例String str="{\"flag\":\"true\",\"errorMsg\":\"注册失败\"}";resp.setContentType("application/json;charset=utf-8");resp.getWriter().print(str);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp);}}效果：本节代码地址：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
使用jQuery的validate对提交的表单进行验证
使⽤jQuery的validate对提交的表单进⾏验证1、将校验规则写到控件中<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程()</title><script src="https:///assets/jquery-validation-1.14.0/lib/jquery.js"></script><script src="https:///assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script><script src="https:///assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script><script>$.validator.setDefaults({submitHandler: function() {//验证通过后执⾏这⾥alert("提交事件!");}});$().ready(function() {$("#commentForm").validate();});</script><style>.error{color:red;}</style></head><body><form class="cmxform" id="commentForm" method="get" action=""><fieldset><legend>输⼊您的名字，邮箱，URL，备注。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
});
}
}
</script>
</head>
<body>
<div class="container">
url: "/Home/DoReg",
data: { userNum: $("#userName").val(),
userPwd: $("#userPwd").val(),
rules: {
userName: { required: true, digits: true },
userPwd: { required: true, minlength: 6, maxlength: 20 },
userSex: $("input[@type=radio][@name=userSex][@checked]").val(),
userscdPwd: $("#userPwdAgin").val(),
<script type="text/javascript" src="../../Scripts/jquery.validate.js"></script>
<script type="text/javascript">
$(function() {
return;
}
}
});
}
}
data: ห้องสมุดไป่ตู้ username: uNum },
success: function(mes) {
if (mes == "false") {
alert("该账户已存在，请重新选择一个");
messages: {
userName: { required: "必填", digits: "只能输入数字" },
userPwd: { required: "必填", minlength: "密码最少六位", maxlength: "密码最多20位" },
userPwdAgin: { required: true, minlength: 6, maxlength: 20 },
userSex: { required: true },
passwordSecond: { required: true },
}
});
}
//验证账户
function check() {
var uNum = document.getElementById("userName").value;
<div id="Div1">
<div id="reg_0205con" style="padding-left: 30px;">
<label>
<span class="black14">用户名： </span>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册</title>
<link href="../../../Style/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="../../Scripts/messages_cn.js"></script>
return;
} else {
$.ajax({
type: "GET",
url: "/Home/CheckUser",
qq: { required: true, digits: true },
userEmail: { required: true, email: true }
},
//添加用户
function AddUser() {
if ($("#regForm").valid()) {
$.ajax({
type: "POST",
<div id="reg_icon1">
<img src="../../Images/reg3_14.gif" width="39" height="42" /></div>
<div id="reg_0202">
userPwdAgin: { required: "必填", minlength: "密码最少六位", maxlength: "密码最多20位" },
userSex: { required: "必填" },
VildationForm();
});
//表单验证
function VildationForm() {
$("#regForm").validate(
{
完成注册</div>
</div>
<div id="reg_0205">
<form action="/Home/DoReg" method="post" id="regForm">
passwordSecond: { required: "必填" },
qq: { required: "必填", digits: "只能输入数字" },
userEmail: { required: "必填", email: "输入格式有误" }
<input name="userName" type="text" id="userName" style="width: 150px" onblur="check()" />
欢迎注册易灵通</div>
<div id="reg_icon2">
<img src="../../Images/reg_08.gif" /></div>
<div id="reg_0204">
填写注册信息</div>
<div id="reg_icon3">
<img src="../../Images/reg_10.gif" /></div>
<div id="reg_0203">
if (mes == "true")
alert("注册成功");
else
alert("注册失败");
<div class="reg_01">
<img src="../../Images/register_bg_03.gif" /></div>
<div class="reg_02">
<div id="reg_0201">
var reg = /^0{0,1}(13[0-9]|15[0-9]|18[0-9])[0-9]{8}$/;
if (!reg.test(uNum)) {
alert("手机号码格式有误，请重新输入");
userQQ: $("#qq").val(),
userEmail: $("#userEmail").val()
},
success: function(mes) {
<link href="../../../Style/register.css" rel="stylesheet" type="text/css" />
<link href="../../../Style/fee.css" rel="stylesheet" type="text/css" />