validate插件
2024-10-19 04:13:37
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>validate插件</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="messages_zh.js"></script>
<script> $().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
}, agree: "required"
},
messages: {
firstname: "请输入您的名字",
lastname: "请输入您的姓氏",
username: {
required: "请输入用户名",
minlength: "用户名必需由两个字母组成"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母"
},
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母",
equalTo: "两次密码输入不一致"
},
email: "请输入一个正确的邮箱",
agree: "请接受我们的声明", }
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>验证完整的表单</legend>
<p>
<label for="firstname">名字</label>
<input id="firstname" name="firstname" type="text">
</p>
<p>
<label for="lastname">姓氏</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<label for="username">用户名</label>
<input id="username" name="username" type="text">
</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>
<label for="email">Email</label>
<input id="email" name="email" type="email">
</p>
<p>
<label for="agree">请同意我们的声明</label>
<input type="checkbox" class="checkbox" id="agree" name="agree">
</p>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
最新文章
- 《深入浅出WPF》笔记四
- 并发编程 10—— 任务取消 之 关闭 ExecutorService
- 集合视图控制器(CollectionViewController) 、 标签控制器(TabBarController) 、 高级控件介绍
- 黄聪：PHP json_encode中文乱码解决方法
- JAVA类型信息——Class对象
- 大部分人努力程度之低，根本轮不到拼天赋 [转自w3cschool]
- poj 3692 二分图最大匹配
- redis学习-day1
- 【python】分片copy和等号的区别
- C#文件的拆分与合并操作示例
- Knockout应用开发指南 第三章：绑定语法（3）
- 数据库索引------B-Tree 索引和 Hash 索引的对比
- 关于Oracle使用管理员账号登录失败的问题
- FloatingWindow 悬浮窗开源项目总结
- GNOME 3.28 启用桌面图标
- LuoguP3834 【模板】可持久化线段树 1（主席树）|| 离散化
- linux内核分析第二周
- IIS部署常见问题总结
- 最小生成树--牛客练习赛43-C
- PHP扩展开发--01.编写一个helloWorld扩展