来说说validform吧

最新推荐文章于 2020-07-17 17:58:02 发布

肖肖肖丽珠

最新推荐文章于 2020-07-17 17:58:02 发布

阅读量2.3k

点赞数 1

分类专栏：前端小知识插件

本文链接：https://blog.csdn.net/qq_33769914/article/details/51518316

版权

前端小知识同时被 2 个专栏收录

209 篇文章 3 订阅

订阅专栏

插件

42 篇文章 1 订阅

订阅专栏

开始自己写表单验证的时候真的是头疼死了，即使现在有了html5，他可以自动的在表单中写上类似placeholder这样的属性，但是html5的这些属性还具有兼容性。总之还是得自己写一堆js代码来验证的。但是自从发现了这个validform插件以后省去了所有的js验证，在js中只需要一句话，而在标签内添加一些属性就可以搞定啦！真的太喜欢这个插件啦。好啦，废话不多说了。

可以参考的网址：http://validform.club/这个是官网啊，更加全面。我在下面只是介绍最最简单的一些用法。真的有时我看官网他写的太全自己也完全用不到那么多，还浪费时间去测试。反正不如直接最简单的。

1.引入文件

2html

这里写几个常用的表单

用户名：<input type="text" datatype="*" nullmsg="请填写用户名" errormsg="请填写正确的用户名"/> // datatype="*".输入非空字符

密码：<input type="password" datatype="*2-6" nullmsg="请填写密码" errormsg="请填写2-6个任意的字符"/> // datatype="*2-6".输入2-6个字符

编号：<input type="text" datatype="n3-9" nullmsg="请填写编号" errormsg="请填写3-9个数字"/> // datatype="n3-9".输入3-9个数字

邮箱：<input type="email" datatype="e" nullmsg="请填写邮箱" errormsg="请填写正确邮箱格式"/> // datatype="e".输入邮箱格式

手机号：<input type="tel" datatype="m" nullmsg="请填写手机号" errormsg="请填写正确的手机号格式"/> // datatype="m".输入电话格式

你的最爱<select datatype="*" nullmsg="请选择你的最爱" >

</select>

<textarea datatype="s" tip="请在这里写上您对我们的意见" errormsg=“请填写有效内容”></textarea> // datatype="s".输入字符串格式

</form>

3，js

$(".form1").Validform(); //注意这里V是大写的哈，不如会报错的。

可以考虑在每个input后面添加一个<span class="Validform_checktip">请填写用户名</span>。这样出错或者没有填写的时候就是在后面显示这个div的提示信息

我遇到的问题：

1，table和form一起用的时候怎么办？

form在外面包围住table。在table的td里面写input。

2，在js中动态的添加一些input的时候发现验证框的颜色会变但是提示信息却没有出现。

原因：在页面原来就有的input，他会自动的在后面添加一个<span class="Validform_checktip"></span>

用于填写提示信息。

动态添加的内容却没有。所以他没有地方放他的提示信息。你在添加的input后面都要添加这个span

var ht='<tr class="spec"><td><input type="text"placeholder="(必填)收款人"datatype="*"name="payinfo['+i+'][bank_user]"errormsg="收款人有误！" nullmsg="请填写收款人"/><span class="Validform_checktip"></span></td>...</tr>';

$("table").append(ht);

最后的效果：

3.我想自己写验证。比如出现手机号。身份证这些。最后点击提交的时候竟然没有写click事件。而是把事件写在了这个Validform的beforeSubmit里面执行了。

利用$(".form1").Validform({

tiptype: 3,

btnSubmit: "#btnSubmit", //那个提交按钮
showAllError: true, //点提交时，所有的错误提示都显示
datatype:{ //这里面就可以自定义正则
"phone":/^1\d{10}$/,
},
beforeCheck:function(curform){
},
beforeSubmit:function(curform){

submitFun(); //执行一个提交的函数。把数据提交到后台

（如果没有写函数直接在下面又写了一个$("#btnSubmit").click(function(){})的函数，那么一定记得下面的return false。如果不写页面可能在点击这个按钮的时候刷新。而且就算验证没通过他也触发哪个click的事件。）

return false;//页面不跳转,很重要。
}

});

function submitFun(){

$.ajax({
url: "com.cloud.login.service.impl.CustomerAuthRS.queryCountryAuth()",
data: {
verifyCode:$("#mesNum").val(),
phone:$("#phone").val(),
name:$("#name").val(),
idCardNo:$("#idCardNo").val(),
userIdentity:$("#userIdentity").val(),
},

success: function(resdata, textStatus, jqXHRult){

提交成功后页面的一些操作。

}

});

}

使用

4.如果一个input框是只能点击不能编辑的.并且在选择完以后就获取焦点，验证它的内容。

</span>

$("#selectArea").click(function(){

$("#areaName").val(Name).trigger("blur");

});

可以是空或者是指定的字符。

比如邮箱可以不填写，填写的话就必须是是邮箱的类型： dataType="/^\s*$/|e"

但是如果他没填内容，验证也是通过的。这时候那个绿色的对勾图标就会出现。

这样显然是不行的。没填是不能有绿色出现，所以我们就把这个绿色的直接去掉吧，只在用户填写信息的时候判断提示他错了。对的时候什么也不提示。这是最简单的一种方法了。可以直接在css里面通过。 .email + .Validform_right{display: none !important } +代表兄弟接点。

2-10个任意的字符，一个汉字算一个字符的。dataType="*2-10"；

两次密码一样的验证：recheck属性

<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间！" />

<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致！" />

只有再点击提交按钮的时候才验证。平时失去焦点不验证