jQuery Validate学习记录

Allenyhy

2014-09-06

转载请说明出处

用于个人学习

第一步引入相关的js

<!-- ▼引入 jquery validate 相关js -->
<script src="${assets_path}/assets/js/jquery.validate.min.js"></script>
<script src="${assets_path}/assets/js/messages_zh.min.js"></script>

默认校验规则

序号	规则	描述
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。

jquery.validate.min.js里自带的messages就是错误规则提示

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_zh.min.js比如这样

/*! jQuery Validation Plugin - v1.13.0 - 7/1/2014
 * http://jqueryvalidation.org/
 * Copyright (c) 2014 Jörn Zaefferer; Licensed MIT */
!function(a) {
	"function" == typeof define && define.amd ? define(["jquery",
			"../jquery.validate.min"], a) : a(jQuery)
}(function(a) {
	a.extend(a.validator.messages, {
		required : "不能为空",
		remote : "请修正此栏位",
		email : "请输入有效的电子邮件",
		url : "请输入有效的网址",
		date : "请输入有效的日期",
		dateISO : "请输入有效的日期 (YYYY-MM-DD)",
		number : "请输入正确的数字",
		digits : "只可输入数字",
		creditcard : "请输入有效的信用卡号码",
		equalTo : "你的输入不相同",
		extension : "请输入有效的后缀",
		maxlength : a.validator.format("最多 {0} 个字"),
		minlength : a.validator.format("最少 {0} 个字"),
		rangelength : a.validator.format("请输入长度为 {0} 至 {1} 之间的字串"),
		range : a.validator.format("请输入 {0} 至 {1} 之间的数值"),
		max : a.validator.format("请输入不大于 {0} 的数值"),
		min : a.validator.format("请输入不小于 {0} 的数值")
	})
});

第二步在代码里使用

<div class="form-group">
							<label for="title" class="col-sm-2 control-label">
								<s>*</s>
								邮箱：
							</label>
							<div class="col-sm-7 ">
								<input type="text" class="form-control" name="email" id="email"
									placeholder="邮箱" value="${userinfo.email}" data-rule-required="true"
									data-rule-email="true">
							</div>
						</div>

上边这段代码是邮箱验证，

当提交按钮button的type是submit时，

data-rule-email="true"提示不能为空，

还不会插图片奶奶，

data-rule-email="true"加上这个就是使用的自己定义的验证规则，

当输入错误就会提示请输入有效的电子邮件

自己试验发现不能出现重复的email不然就会失效说的不对的话见谅刚学习

比如这样

不会用编辑器复制过来排版有问题

<div class="form-group">
  <label for="email" class="col-md-4 control-label no-padding-right">
	Email </label>
  <div class="col-md-4">
     <span class="block input-icon input-icon-right">
	<input type="email" class=" col-xs-12 col-sm-10 pull-right"
		placeholder="Email" name="email" id="email">
	   <i class="ace-icon fa fa-envelope"></i>
								</span>
    </div>
</div>

<div class="form-group">
<label for="email" class="col-md-4 control-label no-padding-right">
	Email </label>
<div class="col-md-4">
<span class="block input-icon input-icon-right">
<input type="email" class=" col-xs-12 col-sm-10 pull-right"
	placeholder="Email" name="email" id="email">
	<i class="ace-icon fa fa-envelope"></i>
								</span>
</div></div>

<div class="form-group">
<label for="email" class="col-md-4 control-label no-padding-right">
	Email </label>
<div class="col-md-4">
<span class="block input-icon input-icon-right">
<input type="email" class=" col-xs-12 col-sm-10 pull-right"
	placeholder="Email" name="email" id="email">
	<i class="ace-icon fa fa-envelope"></i>
</span>
</div>
</div>

发现上面的有问题

试验后发现同样的控件id和name都不能一样

怎么和屎一样排版不会用这个
$(function() {
   $("#testForm").validate();
		})
function aaa() {
$("label.error", $("#testForm")).each(function() {//遍历 
 <label class='error'> 元素  
  $(this).text('');//将当前 元素清空。
	});
	}

请给要验证的表单加上$("#testForm").validate();

上边的方法是提交时清空错误提示

<div class="form-group">
							<label class="col-sm-2 control-label">下拉多选:</label>
							<div class="col-sm-10">
								<select data-rule-required="true"  data-rule-rangelength="[2,3]"
									multiple="multiple">
									<option value="m_sl">Mercedes SL</option>
									<option value="o_c">Opel Corsa</option>
									<option value="vw_p">VW Polo</option>
									<option value="t_s">Titanic Skoda</option>
								</select>
								<label class="error"></label>
							</div>
						</div>

在想要显示错误提示的地方加上<labelclass="error"></label>

然后在css里定义样式

比如

/*jqueryvalidate前端验证提示信息的字体颜色.*/

label.error{margin-left:10px;color:red;}

排版有问题不过是用来自己学习的哎

validate jquery js