表单验证案例
2020-07-29 本文已影响0人
木子木同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<p>
<label for="username">名字:</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="company">公司名称:</label>
<input id="company" name="company" type="text">
</p>
<p>
<label for="scope">经营范围:</label>
<input id="scope" name="scope" type="text">
</p>
<p>
<label for="job">职务:</label>
<input id="job" name="job" type="text">
</p>
<p>
<label for="email">Email:</label>
<input id="email" name="email" type="email">
</p>
<p>
<label for="tel">电话:</label>
<input id="tel" name="tel" type="tel">
</p>
<p>
<label for="faxes">传真:</label>
<input id="faxes" name="faxes" type="text">
</p>
<p>
<label for="site">地址:</label>
<input id="site" name="site" type="text">
</p>
<p>
<label for="postcode">邮编:</label>
<input id="postcode" name="postcode" type="text">
</p>
<p>
<label for="phone">手机:</label>
<input id="phone" name="phone" type="tel">
</p>
<p>
<label for="channel">您获得展会信息的渠道</label>
<select name="channel" id="channel">
<option value="电话">电话</option>
</select>
</p>
<p>
<input class="submit" type="submit" value="提交">
</p>
</form>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="jquery.validation/1.14.0/messages_zh.min.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function () {
alert("提交事件!");
}
});
$().ready(function () {
$("#signupForm").validate({
rules: {
scope: "required",
company: "required",
username: {
required: true,
minlength: 2
},
job: "required",
tel: {
required: true,
minlength: 11,
},
email: {
required: true,
email: true
},
faxes: "required",
site: "required",
postcode: "required",
phone: {
required: true,
minlength: 11,
},
channel: "required"
},
messages: {
scope: "请输入经营范围",
company: "请输入公司名称",
job: "请输入你的职务",
username: {
required: "请输入用户名",
minlength: "用户名必需由两个字母组成"
},
tel: {
required: "请输入一个正确的电话号码",
minlength: "电话长度不能小于 11 个数组"
},
phone: {
required: "请输入一个正确的手机号",
minlength: "密码长度不能小于 11 个字母",
},
email: "请输入一个正确的邮箱",
faxes: "请输入传真",
site: "请输入一个正确的地址",
postcode: "请输入一个正确的邮编",
channel: "您获得展会信息的渠道",
}
});
});
</script>
</html>
