jQuery Validate 验证表达合法性

最新推荐文章于 2017-06-19 21:21:00 发布

最新推荐文章于 2017-06-19 21:21:00 发布 · 209 阅读

文章标签：

#jquery validate #表单验证 #jquery验证

WEB前端专栏收录该内容

11 篇文章

订阅专栏

本文提供了一个使用 jQuery Validate 进行表单验证的示例，包括HTML5的required属性与jQuery Validate组件的对比，以及具体实现代码。

jQuery Validate 验证表达合法性

——我一直不太信任自己的记忆力，所以我把它们都写下来

下面是实例效果图

虽然html5已经支持用required来进行表单验证，但是体验并不是很好，所以还是推荐jQuery Validation来验证，下面是具体的带，为了方便查看，就全部写在一个文件里了。

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<meta vname=" viewport" width=" device-width;initial-scale=1;"/>
<title>jQuery Validate</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
#regist_content{
	margin-top:10px;
	background:#bbeeff;
	border-radius:10px;
	transition: all 0.7s ease-in-out;

}
#regist_content:hover{
	background:#bbeeff;
	border-radius:10px;
	box-shadow:0 0 8px #333;
}

</style>
</head>

<body class="container ">
<div class="jumbotron">
	<h1>jQuery.validate</h1>
    <p>虽然HTML5已经支持required表单验证，但是体验并不是很好，所以我们推荐jquery Validation组件</p>
    <a class="btn btn-primary" href="http://jqueryvalidation.org/" title="去jQuery.validate.js官网" target="_blank">了解更多</a>
</div>
<div class=" col-xs-offset-4 col-md-4" id="regist_content">
	<form class="" id="commentForm" method="get" action="">
    <div class="form-group ">
      <label for="cname">姓名</label>
      <input class="form-control" id="cname" name="name" minlength="2" type="text" required="required">
    </div>
    <div class="form-group ">
      <label for="cemail">邮箱</label>
		  <input class="form-control" id="cemail_head" type="email" name="email" required>
    </div>
    <p class="form-group ">
      <label for="curl">网址</label>
      <input class="form-control" id="curl" type="url" name="url" required=" required">
    </p>
    <p class="form-group ">
      <label for="ccomment">说明</label>
      <textarea class="form-control" id="ccomment" name="comment" required></textarea>
    </p>
    <p class="form-group text-center">
      <input class=" btn btn-primary" id="submit" class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/jquery-validate/1.14.0/jquery.validate.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
$("#commentForm").validate();
//推荐做法，将此文件放入 messages_cn.js中
jQuery.extend(jQuery.validator.messages, {
        required: "必选字段",
		remote: "请修正该字段",
		email: "请输入正确格式的电子邮件",
		url: "请输入合法的网址",
		date: "请输入合法的日期",
		dateISO: "请输入合法的日期 (ISO).",
		number: "请输入合法的数字",
		digits: "只能输入整数",
		creditcard: "请输入合法的信用卡号",
		equalTo: "请再次输入相同的值",
		accept: "请输入拥有合法后缀名的字符串",
		maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
		minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
		rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
		range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
		max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
		min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});

</script>

</body>
</html>