验证插件的使用方法html
一、须要进入文件jquery和jq_register.js(格式验证)、count_register(倒计时)jquery
<script src="jquery-1.11.3.min.js"></script> <script src="jq_register.js"></script> <script src="count_register.js"></script>
二、html部分ajax
须要验证什么格式就对应加什么class,class能够本身命名也能够用默认的class。ide
<div class="register"> <input class="crequired cchinese" type="text" placeholder="请输入姓名" index="1"></input> <input class="cpassword crequired" type="text" placeholder="请输入密码" index="2"></input> <input class="cpasswordAgin crequired" type="text" placeholder="请再次输入密码" index="3"></input> <input class="cemail crequired" type="email" placeholder="请输入邮箱" index="4"></input> <input class="cphone cnumber" type="text" placeholder="请输入电话号码" index="5"></input> <div> <p>hello world!</p>
三、验证部分函数
验证required部分,须要给每个元素都加上类名crequired,同时加上索引index,对应的值就能够在回调函数中判断。ui
$("p").click(function(){ $(".register").register({ required:true, norequiredCallBack:function(obj){ if (obj==1) console.log("姓名不能为空"); if (obj==2) console.log("密码不能为空"); if (obj==3) console.log("确认密码不能为空"); if (obj==4) console.log("邮箱不能为空"); if (obj==5) console.log("电话号码不能为空"); } }); })
验证其余的,以email为例,直接加上类名cemail,或者本身定义一个,只要在register函数中把emailclass的属性从新定义过就好了。spa
<input class="cemail crequired" type="email" placeholder="请输入邮箱" index="4"></input>
<input class="youxiang crequired" type="email" placeholder="请输入邮箱" index="4"></input>
$("p").click(function(){ $(".register").register({ email:true, emailclass:"youxiang", noemailCallBack:function(){ console.log("邮箱格式不正确"); }, }); })
四、验证成功的回调函数插件
$("p").click(function(){ $(".register").register({ email:true, noemailCallBack:function(){ console.log("邮箱格式不正确"); }, successCallBack:function(){ // ajax写在这里 } }); })
五、返回值部分htm
返回值有true和false,ture为验证成功,false为验证不成功索引
$("p").click(function(){ var registerli=$(".register").register({ email:true, noemailCallBack:function(){ console.log("邮箱格式不正确"); }, successCallBack:function(){ // ajax写在这里 } }); console.log(registerli); })
倒计时使用
Html部分
<a class="get getCode">获取验证码</a>
$(".getCode").countRegister({ count:60, timeStartCallback:function(){ }, timeOutCallback:function(){ } })