一、前言
在做web应用的时候，数据验证是非常重要的，一个不小心就产生bug，而bug多了显得个人开发能力都有问题，这个时候如果能有一个用着得心应手的验证插件，开发效率也会大大的提高。就好像牛魔王告诉孙悟空，你缺少一件兵器，于是他就抢来了棒子，用着那叫一个爽。三首蛟告诉杨戬，你手里缺少一件兵器，于是他把三首蛟变成了三尖两刃枪里，再配合一个忠心而又嗅觉灵敏的狗狗，办起事来真是事半功倍。今天我也学学这款比较流行的表单验证插件，给自己搞一个好使的兵器。
插件官网：https://jqueryvalidation.org
二、cnd的选择
bootcdn(http://www.bootcdn.cn)提供了比较多的插件cdn，比较稳定，使用了一段时间感觉比较靠谱，所以就选择使用它了，当然也可以自己下载到本地使用。
jquery：http://cdn.bootcss.com/jquery/1.8.1/jquery.js
validate：http://cdn.bootcss.com/jquery-validate/1.15.0/jquery.validate.js
插件要生效必须要引入jQuery才可以。
三、简单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
<script src="http://cdn.bootcss.com/jquery-validate/1.15.0/jquery.validate.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form id="commentForm">
<div class="form-group">
<label for="exampleInputName">Name</label>
<input type="text" class="form-control" id="exampleInputName" name="exampleInputName" style="width:40%" required>
</div>
<div class="form-group">
<label for="exampleInputEmail">Email</label>
<input type="email" class="form-control" id="exampleInputEmail" name="exampleInputEmail" style="width:40%" required>
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
</body>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
});
</script>
</html>
只要为html标签指定了required属性，js中只需要一句 $("#commentForm").validate(); 即可完成验证，效率真是大大的提高了。
四、不在html上指定属性
111
时间： 2024-08-23 23:26:26