validate插件Remote用法大全,validate表单验证插件使用方法剖判

近几来做项目,需求用到
jQuery.validate.js插件,于是记录一下做事中的一些经验,以便日后学习。

何以要用jquery
validate这几个表单验证插件:自身写一个通用且效果健全庞大的jquery表单验证插件并不便于。jquery
validate那个jquery插件大约能够轻便应对95%以上的表单验证,具体内容如下

jquery.validate是jquery旗下的四个认证框架,借助jquery的优势,我们能够便捷验证一些广阔的输入,还足以友善壮大本身的求证情势,而且对国际化也会有很好的支

本文实例陈诉了jQuery
validate插件功效与用法。分享给大家供大家参照他事他说加以考察,具体如下:

【例子如下】

采用方法

JQuery.validate.js
在表单验证中一时利用,初学,对于个中Remote的采纳说澳优下.

前言:对于表单内容格式的表明,原生JS的写法,较为麻烦,作者曾在写五个挂号分界面包车型大巴时候,验证邮箱格式,用户名格式,密码格式,多处采纳了正则,並且错误提醒音讯也要用display:none/展现遮盖,在用过jQuery
validate插件后,则大大加快了支出进程!

1.前台页面

1、在控件中采纳默许验证法则,例子:
电子邮件(必填)
<input id=”email” class=”required email”
value=”email@” />

. 基本解释

1.jQuery validate插件提供了强有力的证实功效,jQuery
validate插件的官方网址是

<form id="form1" method="post"> 
用户名:<input type="text" id="UserName" name="UserName" /><!----> 
<br /> 
密 码:<input type="password" id="Password" name="Password" /> 
<br /> 
<input type="submit" id="btnRegister" name="btnRegister" value="注册" /> 
<input type="button" id="btnCancel" name="btnCancel" value="取消" /> 
</form>

2、能够在控件中自定义表明准则,例子:
自定义(必填,[3,5])

JQuery主要用于DOM树和CSS树的索求和前面包车型客车操作的一套方法,JQuery.validate.js是对JQuery的一个插件,能够以为是对JQuery在有个别特殊现象下的扩展,而Validate就是对表单验证提供的扩大。

(1)首先下载jquery.validate.js插件

2.Javascript

<input id="complex" value="hi" class="{required:true,minlength:3, maxlength:5,
messages:{required:'为什么不输入一点文字呢',minlength:'输入的太少了',maxlength:'输入那么多干嘛'}}" />

. 场景解释

接下来在HTML文件中插入

<script type="text/javascript"> 
//添加自定义验证 
jQuery.validator.addMethod("checkPWD", function (value, element) { 
var flag = false; 
//flag = chkpwd($("#pwd")); //自定义验证密码逻辑 
return this.optional(element) || flag; 
}); 
$(function () { 
$("#form1").validate({ 
rules: { 
UserName: { 
required: true, 
//emote: function () { //验证用户名是否存在是否存在 方法一 
// $.ajax({ 
// type: 'POST', 
// url: "Handler/Handler1.ashx", 
// data: { name: $("#UserName").val() }, 
// async: false, 
// success: function (data) { 
// $("#name_error").html(data); 
// } 
// }); 
//} 
remote: { //验证用户名是否存在是否存在 方法二 
type: "POST", 
url: "Handler/Handler1.ashx", //后台处理程序 
dataType: "json", //接受数据格式 
data: { //要传递的参数 
action: function () { return "CheckName" }, 
name: function () { return $("#UserName").val(); }, 
param1: function () { return "自定义参数1"; } 
} 
} 
}, 
Password: { 
required: true, 
checkPWD: true //自定义验证,若想不用自定义验证,把 true 改成 false 即可。 
} 
}, 
messages: { 
"UserName": { 
required: "用户名不能为空.", 
remote: "该会员名已存在!" 
}, 
"Password": { 
required: "密码不能为空.", 
checkPWD: "密码不符合自定义规则。。。" 
} 
} 
}); 
}) 
</script>

3、通过javascript自定义表明法则,上面包车型客车JS自定义了三个准绳,password和confirm_password

用户张开登记用户的时候,要异步的判定用户名是还是不是存在,给出提示音讯。

<script type="text/JavaScript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/js1.js"></script>

3.后台管理程序

$().ready(function() {
 $("#form2").validate({
 rules: {
  password: {
  required: true,
  minlength: 5
  },
  confirm_password: {
  required: true,
  minlength: 5,
  equalTo: "#password"
  }
 },
 messages: {
  password: {
  required: "没有填写密码",
  minlength: jQuery.format("密码不能小于{0}个字符")
  },
  confirm_password: {
  required: "没有确认密码",
  minlength: "确认密码不能小于{0}个字符",
  equalTo: "两次输入密码不一致嘛"
  }
 }
 });
});

. 通过案例学习

因为jQuery插件是基于jQuery库基础之上的,因而在导入jQuery
validate.js文件从前必定要伊始入jQuery.js文件

public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
string action = context.Request["action"]; 
//获取用户名和自定义参数 
string name = context.Request["name"]; 
string param1 = context.Request["param1"]; 
if (!string.IsNullOrEmpty(name)) 
{ 
//模拟查询数据库,如果用户输入的是 admin ,则提示该账户已存在,返回 false 
if (name.Equals("admin")) 
{ 
context.Response.Write("false"); 
} 
else 
{ 
context.Response.Write("true"); 
} 
} 
}

required除了设置为true/false之外,还是能够使用表明式也许函数,比方

Html和JavaScript结合的脚本.

validate插件Remote用法大全,validate表单验证插件使用方法剖判。(2) jQuery
validate插件提供了$(form).validate(options)方法,本插件自带必填的数字,文字等证实法则

4.运转结果

$("#form2").validate({
 rules: {
 funcvalidate: {
 required: function() {return $("#password").val()!=""; }
 }
 },
 messages: {
 funcvalidate: {
 required: "有密码的情况下必填"
 }
 }
});
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<script src="../includes/libraries/javascript/jquery.js" type="text/javascript" charset="utf-" ></script>
<script src="../includes/libraries/javascript/jquery.plugins/jquery.validate.js" type="text/javascript" charset="utf-"></script>
<script type="text/javascript">
$().ready(function() {
$("#signupForm").validate({
debug: false,
onkeyup:false,
/*忽略某些元素不做验证*/
//ignore: ".ignore",
/* 更改错误信息显示的位置
Default:
errorPlacement: function(error, element) { 
error.appendTo(element.parent()); 
} 
error.appendTo(element.parent());
*/
/*
submitHandle: function(form){
alert("submited!");
form.submit();},
*/
rules: {
/*
firstname: { 
required: function(){ return true;}},
*/
firstname: {
required: true,
remote: {
url: "Learn.php",
type: "post",
//DataType: "json",
data: {
firstname: function(){
return $("#firstname").val();
}
}}},
phonenum: {
required: true,
digits: true,
rangelength: [,]},
email: {
required: true,
email: true},
password: {
required: true,
minlength: },
confirm_password: {
required: true,
minlength: ,
equalTo: "#password"}
},
messages: {
firstname: {
required: "请输入姓名",
remote: "请输入姓名,remote"},
phonenum: {
required: "请输入手机号",
digits: "存在字符,非法手机号",
rangelength: "手机号位数不对"},
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"},
password: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{}个字 符")},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能小于个字符",
equalTo: "两次输入密码不一致不一致"}
},
submitHandler: function(form){
alert("验证通过");} 
});
}); 
</script>
</head>
<body>
<form id="signupForm" method="post" action="">
<p>
<label for="firstname">姓氏</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="phonenum">手机</label>
<input id="phonenum" name="phonenum" />
</p>
<p>
<label for="email">邮件</label>
<input id="email" name="email" />
</p>
<p>
<label for="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="提交"/>
</p>
</form>
</body>
</html>

当中form表示表单元素名称,options代表调用validate方法时的安插对象,全体配置新闻和特别音讯显示的平整都蕴含在指标options中。

4.1 用户未输入数据时报错:
皇家赌场手机版 1
4.2 用户输入错误新闻时报错:
皇家赌场手机版 2

Html

后台PHP代码 BaseFunction.php

2.对此利用jQuery
validate的办法有十分的多种,这里详细介绍通过表单成分名称来证实表单准则的主意。

您也许感兴趣的稿子:

  • IE8兼容Jquery.validate.js的问题
  • validate插件Remote用法大全,validate表单验证插件使用方法剖判。快快学习jQuery插件
    jquery.validate.js表单验证插件使用方式
  • jquery表单验证插件(jquery.validate.js)的3种选择办法
  • jquery.validate.js
    三个一样name的管理形式

密码<input id=”password” name=”password” type=”password” />
承认密码<input id=”confirm_password” name=”confirm_password”
type=”password” />
皇家赌场手机版,标准验证<input id=”funcvalidate” name=”funcvalidate” value=”” />

<?php
function WriteLog($msg)
{
$filename = dirname(__FILE__) ."\\Debug.log";
$handler = null;
if (($handler = fopen($filename, 'ab+')) !== false)
{
fwrite($handler, "\n".'['.date('Y-m-d H:i:s').']'."\t".$msg);
fclose($handler);
}
}
function CheckUser($UserName) { 
if( $_REQUEST[$UserName] == 'php' ){
exit("false");
}
else{
exit("true");
}
}
?>

即一种与HTML成分无直接关联,而是经过name属性来波及字段和验证法则的求证写法,这种措施能够达成行为与布局的分开。

4、利用meta自定义表达消息

  后台PHP代码 Learn.php

<form id="form-sp">
 <fieldset>
<legend>用户登录</legend>
<p>
<label for="username">用户名</label>
<input type="text" name="username" />
</p>
  <p class="tip"></p>
<p>
<label for="password">密 码</label>
  <input type="password" name="password"/>
</p>
<p class="tip"></p>
<p>
<label for="confirm-password">再输入</label>
<input type="password" name="confirm-password"/>
</p>
<p class="tip"></p>
  <label for="verify"></label>
  <input type="button" value="确定" name="verify" id="btn-ver"/>
  </fieldset>
</form>

首先用JS设置meta

<?php
require("BaseFunction.php");
CheckUser('firstname');
?>

那对上诉的HTML文件,大家得以写成如下验证法规:

$(“#form3”).validate({ meta: “validate”
});           

以上所述是作者给大家介绍的JQuery
validate插件Remote用法大全的连锁知识,希望对我们以上扶持!

$("#form-sp").validate({
rules:{
username:{
required:true,
minlength:3
},
password:{
required:true,
minlength:6
},
"confirm-password":{
required:true,
equalTo:"#password"
}
},
messages:{
username:{
required:"请输入你的用户名",
minlength:"至少输入三位的用户名"
}
},
errorPlacement:function(error,element){
  error.appendTo(element.parent().next());
}
})

Html

您或者感兴趣的小说:

  • jQuery Validate表单验证插件
    增多class属性格局的校验
  • jQuery
    easyui的validatebox校验准绳扩展及easyui校验框validatebox用法
  • jquery.validate
    自定义表明措施及validate相关参数
  • jQuery插件Validate实现自定义校验结果样式
  • jquery.validate提醒错误新闻地点方法
  • jQuery
    validate插件submitHandler提交导致死循环消除方法
  • jquery.validate使用时遇上的标题
  • jquery表单验证插件(jquery.validate.js)的3种采用办法
  • 传闻Bootstrap+jQuery.validate完成Form表单验证
  • jQuery验证插件
    Validate详解
  • 接纳jquery.validate自定义方法完成”手提式有线电话机号码大概固话至少填写二个”的逻辑验证
  • Jquery validation remote
    验证的缓存难点消除方式
  • JQuery的Validation插件中Remote验证的华语难题
  • jQuery
    Validation插件remote验证情势的Bug消除

运维这段代码后,展现为

email<input class="{validate:{required:true, email:true, 
messages:{required:'输入email地址', email:'你输入的不是有效的邮件地址'}}}"/>

皇家赌场手机版 3

5、运用meta能够将表达准绳写在自定义的标签内,比如validate

大家发掘在自定义准则之后,表单自带了验证措施,下边大家来看validate对象中,具体性质的效率

JS设置meta

(1)首先在rules属性中,咱们根据表单的name,来鲜明各种表单成分的平整:

$().ready(function() {
 $.metadata.setType("attr", "validate");
 $("#form1").validate();
});

比如required:true

Html

证实用户名这些表单成分,不可能为空,

Email

minlength:2,表示用户名至少为2位字符

复制代码 代码如下:

maxlength:10,表示用户名至多为10个人的字符

<input id=”email” name=”email” validate=”{required:true, email:true,
messages:{required:’输入email地址’,
email:’你输入的不是实用的邮件地址’}}” />

(2)其次在messages属性中,定义了当表单中的消息与准则不合乎情状下的,错误提醒消息,

6、自定义表达法则

假定不修改,暗中认可为韩文提醒。在此处大家修改了username表单元素的required:属性的错误新闻

对此复杂的求证,能够透过jQuery.validator.addMethod增添自定义的认证法规

因为在报错的时候会提示,“至少输入三个人用户名”

官方网址提供的additional-methods.js里带有部分常用的辨证措施,比方lettersonly,ziprange,nowhitespace等

3.精晓jQuery validate插件的多个主导属性rules和messages,

例子

上面jQuery validate暗中认可校验表单:

// 字符验证 
jQuery.validator.addMethod("userName", function(value, element) {
 return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "用户名只能包括中文字、英文字母、数字和下划线"); 

//然后就可以使用这个规则了
$("#form1").validate({
 // 验证规则
 rules: {
 userName: {
  required: true,
  userName: true,
  rangelength: [5,10]
 }
 },
 /* 设置错误信息 */
 messages: {
 userName: {
  required: "请填写用户名",
  rangelength: "用户名必须在5-10个字符之间" 
 }  
 },
}); 
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
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。

7、radio、checkbox、select的求证办法类似

这边对于各种校验成分就不一一剖判

radio的验证

咱俩来解析来个风趣的校验成分

 性别

 男<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}"/><br />
 女<input type="radio" id="gender_female" value="f" name="gender" />

(1)equalTo

checkbox的验证

对此equalTo成分,使用情势为equalTo:”#filed”

至少选用两项

在切实的施用时,独有当前的表单成分中的值与name为filed的表单成分的值至极时,重返true
不会报错,不然会报错,并出示错误提醒音信,常见的选用是在登记分界面验证一回输入密码是不是同样,比方:

 选项1<input type="checkbox" id="check_1" value="1" name="checkGroup" 
 class="{required:true,minlength:2, messages:{required:'必须选择',minlength:'至少选择2项'}}" /><br />
 选项2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br />
 选项3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br />
<p>
<label for="password">密 码</label>
 <input type="password" name="password"/>
</p>
<p class="tip"></p>
<p>
 <label for="confirm-password">再输入</label>
 <input type="password" name="confirm-password"/>
</p>

select的验证

对此那些表单,有如下验证准绳:

下拉框

rules:{
username:{
required:true,
minlength:3
},
password:{
required:true,
minlength:6
},
"confirm-password":{
required:true,
equalTo:"#password"
}
},
 <select id="selectbox" name="selectbox" class="{required:true}">
 <option value=""></option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 </select>

只有当name=confirm-password的表单成分,与name=password的表单成分值相等时,才不会报错,不然会显得错误提醒音信。

8、Ajax验证

(2)email校验成分,用于注脚邮箱的格式

用remote能够拓展Ajax验证

一经大家在上例中的表单验证消息中出席email:true那么会自行验证所出口的是不是合作邮箱格式,若分裂盟则赶回false并展现错误提醒新闻;

remote: {
url: "url", //url地址
type: "post",  //发送方式
dataType: "json", //数据格式 data: {   //要传递的数据
 username: function() {
 return $("#username").val();
 }}
}

皇家赌场手机版 4

证实用户多种新闻: 

4.validate的别样格局

<script type="text/javascript"></script>
// 手机号码验证
jQuery.validator.addMethod("mobile", 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("phone", function(value, element) {
 var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
 return this.optional(element) || (tel.test(value));
}, "电话号码格式错误");

// 邮政编码验证 
jQuery.validator.addMethod("zipCode", function(value, element) {
 var tel = /^[0-9]{6}$/;
 return this.optional(element) || (tel.test(value));
}, "邮政编码格式错误");

// QQ号码验证 
jQuery.validator.addMethod("qq", function(value, element) {
 var tel = /^[1-9]\d{4,9}$/;
 return this.optional(element) || (tel.test(value));
}, "qq号码格式错误");

// IP地址验证
jQuery.validator.addMethod("ip", function(value, element) {
 var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
 return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式错误");

// 字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
 var chrnum = /^([a-zA-Z0-9]+)$/;
 return this.optional(element) || (chrnum.test(value));
}, "只能输入数字和字母(字符A-Z, a-z, 0-9)");

// 中文的验证
jQuery.validator.addMethod("chinese", function(value, element) {
 var chinese = /^[\u4e00-\u9fa5]+$/;
 return this.optional(element) || (chinese.test(value));
}, "只能输入中文");

// 下拉框验证
$.validator.addMethod("selectNone", function(value, element) {
 return 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]);
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

(1)用别样措施替代默许的submit方法

参照学习:功用庞大的jquery.validate表单验证插件

submitHandler:function(form){
 form.submit();
}
submitHandler:function(form){
 form.ajaxsubmit();
}

正文已被整理到了《jquery表单验证大全》,应接大家学习阅读。

同一时间能够更动validate()对象的暗中认可submit方法:

如上正是本文的全体内容,希望对我们的求学抱有扶助,也期望大家多多帮助脚本之家。

$.validate.setDefaults({
 submitHander:function(form){
 form.submit();
 }
})

你恐怕感兴趣的文章:

  • jQuery.Validate表单验证插件的运用示例详解
  • 功用庞大的jquery.validate表单验证插件
  • 凭仗Bootstrap+jQuery.validate完结表单验证
  • 高速学习jQuery插件
    jquery.validate.js表单验证插件使用方法
  • jquery表单验证插件(jquery.validate.js)的3种选用方法
  • 根据Bootstrap+jQuery.validate完结Form表单验证
  • jquery.validate表单验证插件使用详解

(2)debug:只验证不提交表单

若果debug:true,则表单只验证不会提交,

千篇一律也能够变动validate()对象的默许submit方法

$.validate.setDefaults({
 debug:true;
})

(3)改换错误音信的来得地点

errorPlacement:function(error,element){
 //第一个参数为错误提示信息,第二个参数为HTML中的元素
 error.appendTo(element.parent())
 //这里也可以直接写成类名的形式或者id名的形式
 //error.appendTo(".class")或者error.appendTo("#id");
}
errorClass String 指定错误提示的 css 类名,可以自定义错误提示的样式。 "error"
errorElement String 用什么标签标记错误,默认是 label,可以改成 em。 "label"
errorContainer Selector 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。
errorContainer: "#messageBox1, #messageBox2"
 
errorLabelContainer Selector 把错误信息统一放在一个容器里面。  
wrapper String 用什么标签再把上边的 errorELement 包起来。

越来越多关于jQuery相关内容感兴趣的读者可查看本站专项论题:《jQuery常用插件及用法总计》、《jQuery扩充技巧计算》、《jQuery切换特效与技巧计算》、《jQuery遍历算法与技巧总计》、《jQuery常见经典特效汇总》、《jQuery动画与特功能法计算》及《jquery选用器用法计算》

意在本文所述对我们jQuery程序设计有着帮忙。

你可能感兴趣的稿子:

  • jQuery
    validate插件完成ajax验证重复的2种方法
  • jQuery
    Validate插件完成表单验证
  • jQuery验证插件validate使用方法详解
  • jQuery
    validata插件达成方式

Leave a Comment.