validate表单验证
来源：互联网 发布：马未都 知乎 编辑：程序博客网 时间：2024/05/03 14:58
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<scriptsrc="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<scriptsrc="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<scriptsrc="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().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
},
"topic[]": {
required:"#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "请输入您的名字",
lastname: "请输入您的姓氏",
username: {
required: "请输入用户名",
minlength: "用户名必需由两个字母组成"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母"
},
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母",
equalTo: "两次密码输入不一致"
},
email: "请输入一个正确的邮箱",
agree: "请接受我们的声明",
topic: "请选择两个主题"
}
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<formclass="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>
<labelfor="confirm_password">验证密码</label>
<input id="confirm_password"name="confirm_password" type="password">
</p>
<p>
<labelfor="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>
<label for="newsletter">我乐意接收新信息</label>
<input type="checkbox"class="checkbox" id="newsletter"name="newsletter">
</p>
<fieldsetid="newsletter_topics">
<legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
<labelfor="topic_marketflash">
<input type="checkbox"id="topic_marketflash" value="marketflash"name="topic[]">Marketflash
</label>
<label for="topic_fuzz">
<input type="checkbox"id="topic_fuzz" value="fuzz"name="topic[]">Latest fuzz
</label>
<labelfor="topic_digester">
<input type="checkbox"id="topic_digester" value="digester"name="topic[]">Mailing list digester
</label>
<label for="topic"class="error" style="display:none">至少选择两个</label>
</fieldset>
<p>
<input class="submit"type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
- validate表单验证插件
- jQuery validate 表单验证
- jquery validate 表单验证
- jquery validate 表单验证
- jQuery validate验证表单
- jquery validate 表单验证
- 表单输入验证-validate
- jQuery Validate 表单验证
- jquery-validate验证表单
- Jquery validate表单验证
- jQuery Validate 表单验证
- jQuery-validate 表单验证
- 使用validate验证表单
- jQuery.validate表单验证
- 表单验证validate
- jQuery Validate 表单验证
- validate.js表单验证
- validate 表单验证
- python读取CSV文件时的路径
- 第4周 【项目一】 建立单链表
- 【modelsim使用 1】打开vcd文件
- 重磅教程！帮你全面彻底搞定Material design的学习笔记
- XMLHttpRequest 对象
- validate表单验证
- 使用MATLAB&simulink&stm32mat_target&stm32cubemx开发stm32
- JavaScript数组去重—ES6的两种方式
- Centos7安装Apache和PHP，包含配置过程
- Docker-局域网络配置
- Linux crontab定时执行任务 命令格式与详细例子
- 清空HDFS回收站
- 动态规划凑硬币
- 构造方法
