vaildate
vaildate是一项用于表单校验的jquery插件技术,很方便的对用户输入的数据进行了校验。
使用方法
首先在项目下引入vaildate的js文件
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
提供的表单代码如下:
1 <form action="Welcome.html" method="get" id="regForm" > 2 <div class="form-group"> 3 <label for="inputEmail3" class="col-sm-2 control-label">昵称</label> 4 <input class="form-control" type="text" id="username" name="username" placeholder="输入昵称" /> 5 6 </div> 7 <div class="form-group"> 8 <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label> 9 <input class="form-control" type="text" id="email" name="email" placeholder="邮箱地址" /> 10 11 </div> 12 <input class="btn btn-default btn-lg active" type="submit" value="登陆" id="dl"/> 13 14 15 16 <input class="btn btn-default btn-lg active" type="button" value="注册" /> 17 18 19 20 21 </form>
注意表单的ID是regForm,
下面是javascript代码
1 script> 2 $(function(){ 3 $("#regForm").validate({ //固定格式 4 rules:{ //规则 5 username:{ 6 required:true //要求不为空 8 }, 9 email:{ 10 required:true, //要求不为空 11 email:true //必须是邮箱地址,这里省去了写正则表达式匹配 12 13 } 14 15 }, 16 messages:{ //当规则出现不匹配的时候提示信息 17 username:{ 18 required:"用户名不能为空" 19 20 }, 21 email:{ 22 required:"请务必留下邮箱", 23 email:"抱歉,您的邮箱格式不正确" 24 25 } 26 }, 27 errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label 28 success: function(label) { //验证成功后的执行的回调函数 29 //label指向上面那个错误提示信息标签label 30 label.text(" ") //清空错误提示消息 31 .addClass("success"); //加上自定义的success类 32 } 33 34 }); 35 }); 36 37 38 </script>