表单验证插件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
    评论
### 回答1: Validform 是一种表单验证插件,它可以帮助我们在提交表单之前对表单进行验证。以下是 Validform 可以使用的一些参数: 1. tiptype:提示信息的显示方式,可以是"1"、"2"、"3"或"4",分别表示“自定义提示”、“浮动提示”、“向右提示”和“弹出提示”。 2. label:是否在表单元素左侧显示标签,默认为false,不显示。 3. showAllError:是否在提交表单前验证所有表单元素,默认为false,只验证第一个错误的表单元素。 4. datatype:表单元素的数据类型,可以是"n"(数字)、"s"(字符串)、"e"(邮箱)、"m"(手机)等。 5. nullmsg:表单元素为空时的提示信息。 6. errormsg:表单元素不符合要求时的提示信息。 7. ajaxurl:当表单元素需要通过 ajax 请求来验证时,ajax 请求的地址。 8. ignoreHidden:是否忽略隐藏的表单元素,默认为true,忽略。 9. beforeCheck:表单元素验证之前的回调函数。 10. beforeSubmit:表单提交之前的回调函数。 以上是 Validform 可以使用的一些常用参数,可以根据具体情况进行选择和配置。 ### 回答2: Validform 是一款基于 jQuery 的表单验证插件,可以用于对表单中的输入内容进行实时验证。它支持多种验证规则以及自定义验证方法,并且可以通过参数设置来定制验证规则。 在使用 Validform 时,我们可以在初始化插件时通过参数来设置验证规则。下面是一些常用的参数: 1. tiptype:设置提示信息的显示方式。可以设置为 1 或 2,1 表示在表单元素后方显示提示信息,2 表示在表单元素下方显示提示信息。 2. tipSweep:设置是否连续显示提示信息。如果设置为 true,则会在表单元素失去焦点时弹出提示信息,否则只有在第一次焦点离开表单元素时才会显示信息,默认值为 false。 3. datatype:设置验证规则。可以设置为 "n"(数字类型)、"s"(字串类型)、"e"(电子邮件类型)等等。也可以通过设置正则表达式进行复杂的验证。 4. ajaxurl:设置异步请求的地址。当使用 ajax 验证时,可以通过设置这个参数来指定后台处理的 URL 地址。 5. callback:设置回调方法。可以在验证成功或失败后执行一些自定义逻辑。 除了以上参数外,Validform 还提供了许多其他参数,如 ignoreHidden、showAllError、btnSubmit 等,可以根据需要调整验证方式和效果。 总之,通过合理设置参数,我们可以完全定制 Validform 插件的验证行为,使其能够满足不同项目的需求。这样可以为用户提供友好的输入提示和错误信息,提高表单的验证准确性和用户体验。 ### 回答3: Validform 是一个基于 jQuery 的表单验证插件,它允许我们在网页上进行表单验证Validform 提供了许多参数,可以根据我们的需求来定制和扩展验证规则。 首先,最基本的参数是 formSelector,用于指定要进行验证的表单的选择器。我们可以使用类名、ID 或任何其他选择器来选择表单。例如:formSelector: ".myForm"。 其次,dataType 参数用于指定验证字段的类型。Validform 内置了一些常见的类型,如手机号码、邮箱、日期等。我们可以根据需要选择适当的类型。例如:dataType: "m" 表示验证手机号码。 我们还可以使用 ignore 参数来指定需要忽略验证的字段。通过给字段添加特定的类名或属性,将它们排除在验证之外。例如:ignore: ".ignoreField"。 另外一个常用的参数是 titDefault,它用于设置验证提示信息的默认文本。我们可以在初始化时通过该参数设置默认文本,也可以在具体的字段中重新定义提示信息。例如:titDefault: "该字段不能为空"。 除此之外,Validform 还提供了许多其他参数,如 ajaxPost、tiptype、beforeSubmit 等,它们可以帮助我们进一步定制和扩展表单验证的功能。 总之,Validform 使用参数来定义表单验证的行为。我们可以根据需要设置不同的参数,以满足特定的验证需求。通过合理使用这些参数,我们可以实现灵活、高效的表单验证

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值