网络编程 
首页 > 网络编程 > 浏览文章

使用jQuery validate 验证注册表单实例演示

(编辑:jimmy 日期: 2026/5/7 浏览:3 次 )

Validation是jQuery的插件,提供的方法可以大大简化验证表单的工作,功能也足够一般的需要了。rules也足够简单,很容易上手,举个简单的例子,用validation来验证注册表单。

首先确定验证的目标是:
1. 必填项不能为空
2. 注册用户名必须为6-12个字符内
3. 合格的email格式
4. 密码必须为6-18个字符
5. 确认密码必须跟密码一致

ok,目标很明确了。正片开始
复制代码 代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.3.2.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.validate.min.js"><script type="text/javascript">
$(function(){
$( "#regForm" ).validate({
rules: {
// 注册用户名
username: {
required: true,
minlength: 5,
maxlength: 12
},
// email
email: {
required: true,
email: true
},
// 密码
password: {
required: true,
minlength: 6,
maxlength: 18
},
// 确认密码
confirm_password: {
equalTo:"#password"
},
// 检验验证码
captcha: {
required: true,
remote: "checkCaptcha.php"
}
},
messages: {
// 注册用户名
username: {
required: "此项不能为空",
minlength: "不能少于5个字符",
maxlength: "不能多于12个字符"
},
// email
email: {
required: "此项不能为空",
email: "email格式不正确"
},
// 密码
password: {
required: "此项不能为空",
minlength: "不能少于6个字符",
maxlength: "不能多于18个字符"
},
// 确认密码
confirm_password: "两次输入密码不一致",
// 检验验证码
captcha: {
required: "请输入验证码",
remote: "验证码输入错误"
}
}
});
});
</script>

运行后,得到下面的结果
使用jQuery validate 验证注册表单实例演示

更多用法参考 https://www.jb51.net/article/24405.htm

上一篇:js实现上传图片之上传前预览图片
下一篇:多个表单中如何获得这个文件上传的网址实现js代码
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 站点导航 SiteMap