表单验证插件Validform的使用方法

第一步:在前台html文件中引入js和css:
<link rel="stylesheet" href='__ROOT__/Public/js/Validform/style.css'/>
<script src='__ROOT__/Public/js/jquery.js'></script>
<script src='__ROOT__/Public/js/Validform/Validform.js'></script>
第二步:前台表单:
1 datatype:设置文本框内容的数据类型,例如:datatype="n6-6":六位数字,datatype='*6-12':密码为6——12位(字母或数字或其它符号)
2 errormsg:当输入内容出现错误时输出的信息
3 nullmsg:当内容为空时输出的信息
4 ajaxurl:提交到后台执行的方法
5 <font class="Validform_checktip"></font>:输出信息
例如:
<form class='form' action='login' method='post' name='myform'>
<div>
&nbsp用户类型:
<select name='user_type' id='user_type' style='width:135px'>
<option value='1'>教师</option>
<option value='2'>管理员</option>
</select><br/></br>
</div>
<div> 
&nbsp账  号: <input type='text' id='idcard' name='idcard' style='width:135px' ajaxurl="__URL__/check?name=param" datatype="n6-6" errormsg="账号为6位数" nullmsg="账号不能为空!"/><font class="Validform_checktip"></font><br/><br/>
</div> 
<div>
&nbsp密  码: <input type='password' id='pwd' name='pwd' style='width:135px' datatype='*6-12' errormsg="密码为6——12位数" nullmsg='请输入密码'/><font class="Validform_checktip"></font><br/><br/>
</div>
<div class='pas'>
<input id='check' type='checkbox'/>&nbsp<font id='keep' color='darkorange'>记住密码</font>
/div><br/><br/>
<center>
<input type='button' name='login' value='登录'/>
&nbsp&nbsp
<input type='button' name='reset' value='重置'/>
</center>

</form>
第三步:js文件中:
$(".form").Validform({ //表单提交
ignoreHidden:true,
postonce:true, 
ajaxPost:true,
tiptype:function(msg,o,cssctl){
if(!o.obj.is("form")){
var objtip=o.obj.siblings(".Validform_checktip");
cssctl(objtip,o.type);
objtip.text(msg); 
}  
},
callback:function(data){ //回调函数

switch(data){
case 1:
window.location.href=$('#url').val()+'/Test/Test/test_manage';
alert('登陆成功');
break;
case 2:
window.location.href=$('#url').val();
break;
case 3:
$('input[name="pwd"]').val('');
alert('密码输入错误');
break;
case 4:
$('input[name="idcard"]').val('');
$('input[name="pwd"]').val('');
alert('登录失败'); 
break;
}
}
});
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值