验证
腾讯微博注册验证插件实现
首先需要我们引用插件icheck
Html
<input data-label="姓名" type="text" data-validator="required chinese" maxlength="12" name="chinese" id="chinese" class="text"><em>*</em></label><br><span id="chinesetpmsg">请填写真实姓名</span></p>
Data-label对应icheck插件里面错误信息中的label,代表将被替换的字段
data-validator验证规则名称
验证的实现
$("#chinese").blur(function () {
var self = $(this);
var error = self.fivalidate(); //执行验证
if (error) { //根据返回信息进行处理
$("#chinesetpmsg").html("<b class='back' >"+error+"</b>");
$(this).focus();
} else {
$("#chinesetpmsg").text("请填写真实姓名");
$("#ap_name").val($(this).val());
}
});
Validate
演示地址：http://www.yhuan.com/formvalidator/demo.html
导入js库jquery.validate.js
默认校验规则
(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.validator.messages下的提示信息.
使用方式
$().ready(function(){$(“#fromid”).validate();})//加载验证控件
Html
<input id="email" name="email" class="required email" />
<input id="password" name="password" type="password" class="{required:true,minlength:5}" />
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
使用class="{}"的方式，必须引入包：jquery.metadata.js
可以使用如下的方法，修改提示内容：
class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
在使用equalTo关键字时，后面的内容必须加上引号，如下代码：
class="{required:true,minlength:5,equalTo:'#password'}"
实现验证
$().ready(function() {
$("#signupForm").validate({
email: { required: true,email: true},
password: { required: true,minlength: 5},
confirm_password: { required: true, minlength: 5, equalTo: "#password"}
},
messages: {
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字 符")
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"
}
}
});
});
轻量级验证插件
Koo team http://kooteam.com/koo/index.htm
easyvalidator http://code.google.com/p/easyvalidator/
happy
Happy.js 是一个轻量级的 jQuery 表单验证插件，默认只支持一些简单的输入框验证（必填，数据，数字，e-mail，最小/最大，和电话号码），但是简单增加一些行和正则，就能扩展。
实现
第一步：定义表单：
<form id="awesomeForm" action="/lights/camera" method="post">
<input id="yourName" type="text" name="name" />
<input id="email" type="text" name="email" />
</form>
第二步：定义验证模式
$('#awesomeForm').isHappy({
fields: {
'#yourName': {
required: true,
message: '名字是必须的'
},
'#email': {
required: true,
message: 'email也是必须的',
test: happy.email
}
}
});
这样两步就可以了，Happy.js 就会验证每个每个字段当该字段正在输入的时候，并且提交的时候会验证所有的字段，如果验证失败：
这个字段就会被加上一个 unhappy 的 class。
这个字段右侧会加上一个 class 为 unhappyMessage，id 为该字段的 id 加上 _unhappy 的 <span> 如：<span id="textInput1_unhappy" class="unhappyMessage">请输入你的 email </span>
其实还有好几款表单验证插件这里就不一一说明，如有需要可以查看下面网址，该网址归纳了10种强大的jquery表单验证插件。
http://www.oschina.net/news/28082/10-javascript-form-validate