详解实例截图VALIDATION JQUERY表单验证
jQueryValidate插件ajax方式验证输入值的实例
jQueryValidate插件ajax⽅式验证输⼊值的实例项⽬中经常会遇到需要后台验证问题，如⽤户名、⽤户账号是否存在等。
使⽤jQuery Validate插件可以使⽤remote校验规则完成验证。
⽰例：⼀.基本⽤法1.需要验证的表单<form id="registForm"><input type="text" id="username" name="username"></form>2.js使⽤remote校验规则，最简单粗暴的写法是remote: url，此时请求的url后⾯⾃动拼接当前验证的值，例如下⾯的写法，请求的url为：xxx/checkUsername.do?username=test// 导⼊jquery、validte库略$(function() {$.validator.setDefaults({submitHandler: function(form) {// 验证通过处理...}});$("#registForm").validate({rules: {username: {required: true,remote: "checkUsername.do"},},messages: {username: {required: "⽤户名不能为空",remote: "⽤户名已经存在"}}});});3.后台（Spring MVC测试）后台响应只能输出true或false，不能有其他数据，true：验证通过，false：验证失败；设置返回类型为boolean或String都可以(1).返回boolean@RequestMapping("/checkUsername")public @ResponseBody boolean checkUsername(@RequestParam String username) {// 测试return !"test".equals(username);}(2).返回String@RequestMapping("/checkUsername")public @ResponseBody String checkUsername(@RequestParam String username) {// 测试return !"test".equals(username) ? "true" : "false";}⼆.其他⽤法上⾯的⽤法不能满⾜实际的需求，有时候会有需要提交其他参数、参数名和属性名不⼀致或请求⽅式为POST的情况，写法如下：1.js使⽤data选项，也就是jQuery的$.ajax({...})的写法；提交的数据需要通过函数返回值的⽅式，直接写值有问题；默认会提交当前验证的值，也就是下例中的 username: xxx会被默认作为参数提交....username: {required: true,remote: {url: "checkUsername.do",type: "post", //数据发送⽅式dataType: "json", //接受数据格式data: { //要传递的数据username: function() {return $("#username").val();},extra: function() {return "额外信息";}}}}2.后台限制了必须为POST⽅式请求@RequestMapping(value = "/checkUsername", method = RequestMethod.POST)public @ResponseBody boolean checkUsername(User user, @RequestParam String extra) {// 测试System.out.println(extra);return !"test".equals(user.getUsername());}以上这篇jQuery Validate插件ajax⽅式验证输⼊值的实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
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. 校验提示信息除了校验规则外，表单校验还需要提供相应的提示信息，以便用户知道输入的数据是否合法。
validform表单验证的实现方法
validform表单验证的实现⽅法validform插件主要把所有的验证条件和验证提⽰信息绑定到每个表单元素，这种形式⾮常⽅便，下⾯写法更加智能得到label内容来提⽰validform有什么⽤？⽹页上有⼤量的input需要你进⾏验证的时候，如果是弹窗的话，需要不停地判断，如果为空，弹窗。
如果不是数字，弹窗。
所以要将这么多验证交给⼀个js去验证。
validateform.js简单使⽤⽅法1.datatype要想标识出来想要验证的对象，我们就需要给这个对象绑定datatype属性，validform.js已经内置了10种验证格式，如果不够，我们还可以使⽤来对验证格式进⾏扩展。
1.1 datatype=*这个验证是⽤来表⽰当前的对象不能为空的，任何字符均可1.2 datatype=*6-16validform这个js有个优点，它会⾃动扩展你所写的验证格式。
不同的字段我们可能要求的字符数量不⼀样，⽤户名这⾥你写了*6-16，要求⽤户填⼊6到16位的字符。
可标题这⾥⼜要求填⼊2到5个字符，难道我们要在验证格式这⾥再写⼀个*2-5吗？不⽤！形如"*6-16"的datatype，Validform会⾃动扩展，可以指定任意的数值范围。
如内置基本类型有"*6-16"，那么你绑定 datatype="*4-12"就表⽰4到12位任意字符。
如果你⾃定义了⼀个datatype="zh2-4"，表⽰2到4位中⽂字符，那么 datatype="zh2-6"就表⽰2到6位中⽂字符。
1.3 datatype=url可以⽤来验证⽹址。
1.4 datatype=e可以⽤来验证电⼦邮箱地址1.5 datatype=m⽤来验证⼿机号，但是给的正则表达式有问题，对于新出现的177号段之类的没有加⼊进去，这块需要注意⼀下。
1.6 其他注意事项datatype⽀持规则累加或单选。
jquery validate和validform验证插件的对比
此文在jquery的验证插件（下文以jquery代替）和validform验证插件之间作如下对比：1、样式2、普通验证：3、自定义验证：4、Ajax验证：一、样式1、Jquery（可自定义提示信息样式，下图摘自官方文档）：2、Validform（提供七种内置方案并支持自定义，以下为七种内置的较常用的三种）：二、普通验证1、Jquery：Jquery支持两种方式验证：1、直接将规则绑定到元素上。
2、将规则写在初始化js 中1、直接将规则绑定到元素上。
<form class="cmxform" id="form2" method="get" action=""><fieldset><legend>验证一个完整的表单</legend><p><label for="email">Email</label><input id="email" name="email" required type="email"></p><p><label for="agree">喜欢的颜色</label><select id="color" name="color" title="请选择您喜欢的颜色！" required><option></option><option>红色</option><option>蓝色</option><option>黄色</option></select></p><p><label for="phone">电话</label><input id="phone" name="phone" required type="number" rangelength="[2,8]"> </p><p><label for="address">地址</label><input id="address" name="address" required minlength="3"></p><p><label for="avatar">头像</label><input type="file" id="avatar" name="avatar" required></p><p><label for="agree">请同意我们的条款</label><input type="checkbox" class="checkbox" id="agree" title="请同意我们的条款！" name="agree" required></p><p><input class="submit" type="submit" value="提交"/><input class="cancel" type="submit" value="取消"/></p></fieldset></form>2、将规则下载初始化js中$().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: "两次输入密码不一致不一致"}}});});2、Validform：Validform也支持两种：1、直接将规则绑定到元素上。
jQuery完成表单验证的实例代码（纯代码）
jQuery完成表单验证的实例代码（纯代码）废话不多说了，直接给⼤家贴代码了，具体代码如下所⽰：<!doctype html><head><meta charset=utf-8" /><title>表单验证</title><link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css" /><!-- 引⼊jQuery --><script src="jquery/jquery.js" type="text/javascript"></script><script>$(document).ready(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='请输⼊⾄少六位的⽤户名';$parent.append('<span class="formtips onError">'+errorMsg+'</span>');}else{var okMsg='输⼊正确';$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');return false;}}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>');}}});$("#send").click(function() {$("form .required:input").trigger('blur');var numError=$("form .onError").length;if(numError){return false;}alert("注册成功，密码已发到你的邮箱，请查收。
jquery表单验证方法
jquery表单验证方法English:One of the most popular methods for form validation in jQuery is using the validate() method. This method allows you to define various rules for each form field, such as required, minlength, maxlength, and custom validation using regular expressions. Additionally, you can specify error messages for each rule to provide custom feedback to the user. The validate() method also has built-in support for remote validation, which allows you to make an AJAX request to the server to check if a certain value is already in use, such as a username or email address. This method provides a flexible and easy-to-use way to validate form input without needing to write a lot of custom JavaScript code.中文翻译: 在jQuery中，表单验证最常用的方法之一是使用validate()方法。
该方法允许您为每个表单字段定义各种规则，如必填、最小长度、最大长度以及使用正则表达式进行自定义验证。
此外，您还可以为每个规则指定错误消息，以向用户提供自定义的反馈。
jQuery.Validate使用笔记（jQueryValidation范例）
jQuery.Validate使⽤笔记（jQueryValidation范例）验证操作类formValidatorClass.js复制代码代码如下:/*** @author ming*/$(document).ready(function(){/**//* 设置默认属性 */$.validator.setDefaults({submitHandler: function(form) {form.submit();}});// 字符验证jQuery.validator.addMethod("stringCheck", function(value, element) {return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);}, "只能包括中⽂字、英⽂字母、数字和下划线");// 中⽂字两个字节jQuery.validator.addMethod("byteRangeLength", 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[0] && length <= param[1] );}, "请确保输⼊的值在3-15个字节之间(⼀个中⽂字算2个字节)");// ⾝份证号码验证jQuery.validator.addMethod("isIdCardNo", function(value, element) {return this.optional(element) || isIdCardNo(value);}, "请正确输⼊您的⾝份证号码");// ⼿机号码验证jQuery.validator.addMethod("isMobile", function(value, element) {var length = value.length;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;return this.optional(element) || (length == 11 && mobile.test(value));}, "请正确填写您的⼿机号码");// 电话号码验证jQuery.validator.addMethod("isTel", function(value, element) {var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式************return this.optional(element) || (tel.test(value));}, "请正确填写您的电话号码");// 联系电话(⼿机/电话皆可)验证jQuery.validator.addMethod("isPhone", function(value,element) {var length = value.length;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;var tel = /^\d{3,4}-?\d{7,9}$/;return this.optional(element) || (tel.test(value) || mobile.test(value));}, "请正确填写您的联系电话");// 邮政编码验证jQuery.validator.addMethod("isZipCode", function(value, element) {var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value));}, "请正确填写您的邮政编码");//开始验证$('#submitForm').validate({/**//* 设置验证规则 */rules: {username: {required:true,stringCheck:true,byteRangeLength:[3,15]},email:{required:true,email:true},phone:{required:true,isPhone:true},address:{required:true,stringCheck:true,byteRangeLength:[3,100]}},/**//* 设置错误信息 */messages: {username: {required: "请填写⽤户名",stringCheck: "⽤户名只能包括中⽂字、英⽂字母、数字和下划线",byteRangeLength: "⽤户名必须在3-15个字符之间(⼀个中⽂字算2个字符)"},email:{required: "请输⼊⼀个Email地址",email: "请输⼊⼀个有效的Email地址"},phone:{required: "请输⼊您的联系电话",isPhone: "请输⼊⼀个有效的联系电话"},address:{required: "请输⼊您的联系地址",stringCheck: "请正确输⼊您的联系地址",byteRangeLength: "请详实您的联系地址以便于我们联系您"}},/**//* 设置验证触发事件 */focusInvalid: false,onkeyup: false,/**//* 设置错误信息提⽰DOM */errorPlacement: function(error, element) {error.appendTo( element.parent());},});});测试页index.html复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>jQuery验证</title><script src="lib/jquery/jquery-1.3.2.min.js" ></script><script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></script> <script type="text/javascript" src="lib/jquery/messages_cn.js"></script><script type="text/javascript" src="lib/jquery/formValidatorClass.js"></script><style type="text/css">* {}{font-family: Verdana;font-size: 96%;}label {}{width: 10em;float: left;}label.error {}{float: none;color: red;padding-left: .5em;vertical-align: top;}p {}{clear: both;}.submit {}{margin-left: 12em;}em {}{font-weight: bold;padding-right: 1em;vertical-align: top;}</style></head><body><form class="submitForm" id="submitForm" method="get" action=""><fieldset><legend>表单验证</legend><p><label for="username">⽤户名</label><em>*</em><input id="userName" name="username" size="25" /></p><p><label for="email">E-Mail</label><em>*</em><input id="email" name="email" size="25" /></p><p><label for="phone">联系电话</label><em>*</em><input id="phone" name="phone" size="25" value="" /></p><p><label for="address">地址</label><em>*</em><input id="address" name="address" size="22"></p><input class="submit" type="submit" value="提交"/></p></fieldset></form></body></html>校验规则参数格式为; name:{rule1, rule2 ....} name 要使⽤input 标签的name，之前，错误理解为 ID 了；提⽰信息使⽤ alert 输出:复制代码代码如下:errorPlacement: function (error, element) {if (error[0].textContent){Alert(error[0].textContext); }else {Alert(error[0].innerText); }}。
JqueryValidate表单相同Name不校验问题解决
JqueryValidate表单相同Name不校验问题解决在使⽤Jquery validate中遇到⼀个问题，当表单元素有name相同字段时，validate只校验表单元素name第⼀个值是否通过校验，⽐如<input type="text" name="userName"/><input type="text" name="userName"/><input type="text" name="userName"/><select name="favour"></select><select name="favour"></select><select name="favour"></select>elements: function() {var validator = this,rulesCache = {};// Select all valid inputs inside the form (no submit or reset buttons)return $( this.currentForm ).find( "input, select, textarea, [contenteditable]" ).not( ":submit, :reset, :image, :disabled" ).not( this.settings.ignore ).filter( function() {var name = || $( this ).attr( "name" ); // For contenteditableif ( !name && validator.settings.debug && window.console ) {console.error( "%o has no name assigned", this );}// Set form expando on contenteditableif ( this.hasAttribute( "contenteditable" ) ) {this.form = $( this ).closest( "form" )[ 0 ]; = name;}// Select only the first element for each name, and only those with rules specified，缓存判断if ( name in rulesCache || !validator.objectLength( $( this ).rules() ) ) {return false;}// 在这⾥做了⼀层Cache，如果下次再来相同的Name，则不会再进⼊validate的校验ListrulesCache[ name ] = true;return true;} );},解决办法1. 我们可以更改源码cache的key的名字或者在Jquery页⾯load完毕后，修改property上的validate原型⽅法，它使⽤name可能会造成这种bug，那我们使⽤Id，⼀般Id是不会重复的，如果Id不存在，我们再使⽤name来做为cache的key，简单来说，就是⼀⾏代码var name = this.id || || $( this ).attr( "name" ); // For contenteditable⽐原有的var name = || $( this ).attr( "name" ); // For contenteditable多了⼀个 this.id 判断。
jqueryvalidate自定义验证方法日期验证
jqueryvalidate⾃定义验证⽅法⽇期验证jquery validate有很多验证规则，但是更多的时候，需要根据特定的情况进⾏⾃定义验证规则。
这⾥就来聊⼀聊jquery validate的⾃定义验证。
jquery validate有⼀个⽅法，可以让⽤户来⾃定义验证规则。
案例⼀：//⾃定义验证$.validator.addMethod("isPositive",function(value,element){var score = /^[0-9]*$/;return this.optional(element) || (score.test(value));},"<font color='#E47068'>请输⼊⼤于0的数字</font>");通过addMethod⽤户可以⾃定义⾃⼰的验证规则这个⽅法有三个参数，第⼀个参数表⽰验证规则名称，这⾥是isPositive，表⽰是否为正数。
第⼆个参数是真正的验证主体，它是⼀个函数，函数的第⼀个value表⽰调⽤这个验证规则的表单的值，第⼆个element可以⽤来判断是否为空，为空的时候，就不调⽤这个验证规则了。
第三个参数是返回的错误提⽰。
具体如何使⽤呢？其实跟jquery validate固有的验证规则使⽤是⼀样的。
<tr bgcolor="#f7f7f7" height="43" align="right"><td class="font14_s pdr_12 grey_70">总分:</td><td class="font14_s pl40" align="left"><input type="text" id="fullscore" name="fullscore" style=" margin-left: 10px; margin-right: 2px;" value="<!--{$aExams.fullscore}-->" class="required number isPositive </tr>如上所⽰，加粗的地⽅就是使⽤的⽅法，⼀共⽤了三个验证规则，⼀个是必须，⼀个是数字，⼀个是⾃定义验证规则。
jquery实现一个简单的表单验证实例
表单验证在网站开发过程中经常遇到，我们可以使用服务器端语言验证，也可以使用客户端语言来验证。
本文章向大家介绍jquery客户端验证表单的一个简单实例。
实例仅作参考。
<body><form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个需要的元素添加required --> <input type="text" id="username" class="required" /> </div> <div class="int"> <label for="email">邮箱:</label> <input type="text" id="email" class="required" /> </div> <div class="int"> <label for="personinfo">个人资料:</label> <input type="text" id="personinfo" /> </div> <div class="sub"> <input type="submit" value="提交" id="send"/><input type="reset" id="res"/> </div></form></body><script src="/Public/js/jquery-1.7.1.min.js"></script><script type="text/javascript">//<![CDATA[$(function(){ /* *思路大概是先为每一个required添加必填的标记，用each()方法来实现。