validform.js使用方法
表单验证之validform.js使用方法
一.validform有什么用?
二.我现在知道的全页面js验证文件
1.jquery.validat.js
$("#btnAdd").on("click", function() {
$("#validateform").submit();
});
$("#validateform").validate({
rules: {
txtUrl: {
required: true,
url: true //确定是不是url
},
txtRequired: {
required: true
}
},
submitHandler: function(form) {
addNewAd();
}
});
2.validfrom.js
三.validateform.js简单使用方法
1.datatype
1.1 datatype=*
1.2 datatype=*6-16
1.3 datatype=url
1.4 datatype=e
1.5 datatype=m
1.6 其他注意事项
支持简单的逻辑运算:如datatype="m | e, *4-18 | /\w{3,6}/i | /^validform\.rjboy\.cn$/",
这 个表达式的意思是:可以是手机号码;或者是邮箱地址,但字符长度必须在4到18位;或者是3到6位的字母,不区分大小写;或者输入 validform.rjboy.cn,区分大小写。这里","分隔相当于逻辑运算里的"&&"; "|"分隔相当于逻辑运算里的"||";不支持括号运算。
2.ignore
1 beforeCheck: function(curform) {
2 $("#sliderAd ul").each(function() {
3 var needIgnore = true;
4 var _this = $(this);
5 var checkList = _this.find("input[class*=AllNeedOrEmpty]");
6 checkList.each(function() {
7 var that = $(this);
8 if (that.val() != "") {
9 checkList.each(function() {
10 $(this).removeAttr("ignore");
11 });
12 needIgnore = false;
13 }
14 });
15 if (needIgnore) {
16 checkList.each(function() {
17 $(this).attr("ignore", "ignore");
18 });
19 }
20 });
21 },
1 ignore: function(selector) {
2 var obj = this;
3 var selector = selector || "[datatype]"
4
5 $(obj.forms).find(selector).each(function() {
6 $(this).data("dataIgnore", "dataIgnore").removeClass("Validform_error");
7 });
8
9 return this;
10 },
11
12 unignore: function(selector) {
13 var obj = this;
14 var selector = selector || "[datatype]"
15
16 $(obj.forms).find(selector).each(function() {
17 $(this).removeData("dataIgnore");
18 });
19
20 return this;
21 },
3.初始化参数
1 $(".demoform").Validform({
2 btnSubmit: "#btn_sub", //提交按钮
3 btnReset: ".btn_reset",
4 tiptype: 1, //
5 ignoreHidden: false,
6 dragonfly: false,
7 tipSweep: true,
8 label: ".label",
9 showAllError: false,
10 postonce: true,
11 ajaxPost: true,
12 datatype: {
13 "*6-20": /^[^\s]{6,20}$/,
14 "z2-4": /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
15 "username": function(gets, obj, curform, regxp) {
16 //参数gets是获取到的表单元素值,obj为当前表单元素,curform为当前验证的表单,regxp为内置的一些正则表达式的引用;
17 var reg1 = /^[\w\.]{4,16}$/,
18 reg2 = /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/;
19 if (reg1.test(gets)) {
20 return true;
21 }
22 if (reg2.test(gets)) {
23 return true;
24 }
25 return false;
26 //注意return可以返回true 或 false 或 字符串文字,true表示验证通过,返回字符串表示验证失败,字符串作为错误提示显示,返回false则用errmsg或默认的错误提示;
27 },
28 "phone": function() {
29 // 5.0 版本之后,要实现二选一的验证效果,datatype 的名称 不 需要以 "option_" 开头;
30 }
31 },
32 usePlugin: {
33 swfupload: {},
34 datepicker: {},
35 passwordstrength: {},
36 jqtransform: {
37 selector: "select,input"
38 }
39 },
40 beforeCheck: function(curform) {
41 //在表单提交执行验证之前执行的函数,curform参数是当前表单对象。
42 //这里明确return false的话将不会继续执行验证操作;
43 },
44 beforeSubmit: function(curform) {
45 //在验证成功后,表单提交前执行的函数,curform参数是当前表单对象。
46 //这里明确return false的话表单将不会提交;
47 },
48 callback: function(data) {
49 //返回数据data是json对象,{"info":"demo info","status":"y"}
50 //info: 输出提示信息;
51 //status: 返回提交数据的状态,是否提交成功。如可以用"y"表示提交成功,"n"表示提交失败,在ajax_post.php文件返回数据里自定字符,主要用在callback函数里根据该值执行相应的回调操作;
52 //你也可以在ajax_post.php文件返回更多信息在这里获取,进行相应操作;
53 //ajax遇到服务端错误时也会执行回调,这时的data是{ status:**, statusText:**, readyState:**, responseText:** };
54
55 //这里执行回调操作;
56 //注意:如果不是ajax方式提交表单,传入callback,这时data参数是当前表单对象,回调函数会在表单验证全部通过后执行,然后判断是否提交表单,如果callback里明确return false,则表单不会提交,如果return true或没有return,则会提交表单。
57 }
58 });
3.1 如何使用ajax提交数据,而不提交表单。
1 beforeSubmit: function (curform) {
2 addNewAd();
3 return false;
4 //这里明确return false的话表单将不会提交;
5 }
3.2 tiptype
1 if (tiptype == 2) {
2 if ($(this).parent().next().find(".Validform_checktip").length == 0) {
3 $(this).parent().next().append("<span class='Validform_checktip' />");
4 $(this).siblings(".Validform_checktip").remove();
5 }
6 }
1 if (tiptype == 3) {
2 if ($(this).siblings(".Validform_checktip").length == 0) {
3 $(this).parent().append("<span class='Validform_checktip' />");
4 $(this).parent().next().find(".Validform_checktip").remove();
5 }
6 }
以上就是我认为validform.js中需要注意的事情和使用方法的展示,欢迎讨论,拍砖。
validform.js使用方法的更多相关文章
- 表单验证之validform.js使用方法
一.validform有什么用? 网页上有大量的input需要你进行验证的时候,如果是弹窗的话,需要不停地判断,如果为空,弹窗.如果不是数字,弹窗. 所以要将这么多验证交给一个js去验证. 二.我现在 ...
- js调用php和php调用js的方法举例
js调用php和php调用js的方法举例1 JS方式调用PHP文件并取得php中的值 举一个简单的例子来说明: 如在页面a.html中用下面这句调用: <script type="te ...
- 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法
jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...
- jquery.validate.min.js 用法方法示例
页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jQuery 互相调用iframe页面中js的方法
1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...
- JS扩展方法——字符串trim()
转自:http://www.cnblogs.com/kissdodog/p/3386480.html <head> <title>测试JS扩展方法</title> ...
- Js apply 方法 详解
Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- JavaScript基础12——js的方法重载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS replace()方法-字符串首字母大写
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. replace()方法有两个参数,第一个参数是正则表达式,正则表达式如果带全局标志/g,则是代表替换 ...
随机推荐
- Ubuntu 设备 spark
周围环境: Unbunt 12.04 Hadoop 2.2.x Sprak 0.9 Scala scala-2.9.0.final.tgz 一步 1. 下载 scala 2. 解压scala,然后改动 ...
- poj 1959 Darts 同意反复组合
水题.直接贴代码. //poj 1959 //sep9 #include <iostream> using namespace std; int n; int f[128]; int so ...
- DP:树DP
The more, The Better Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- Nginx——事件驱动机制(雷霆追风问题,负载均衡)
事件处理框架 所有的worker进程都在ngx_worker_process_cycle方法中循环处理事件,处理分发事件则在ngx_worker_process_cycle方法中调用ngx_proce ...
- iOS8推送消息的回复处理速度
iOS8我们有一个新的通知中心,我们有一个新的通报机制.当在屏幕的顶部仅需要接收一个推拉向下,你可以看到高速接口,天赋并不需要输入应用程序的操作.锁定屏幕,用于高速处理可以推动项目. 推送信息,再次提 ...
- js缓冲运动
缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度=(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...
- 【程序员联盟】官网上线啦!coderunity.com
内容简介 欢天喜地,[程序员联盟]官网上线咯(此处应该有鸡蛋丢过来...) [程序员联盟]官网 大家也许会问:“这几天小编都没出文章,跑哪里happy去啦?是不是偷懒去了?” 小编:“臣妾冤枉啊.” ...
- zTree市县实现三个梯级数据库映射
zTree市县实现三个梯级数据库映射 Province.hbm.xml: <?xml version="1.0" encoding="UTF-8"? &g ...
- 返璞归真 asp.net mvc (8) - asp.net mvc 3.0 新特性之 Model
原文:返璞归真 asp.net mvc (8) - asp.net mvc 3.0 新特性之 Model [索引页][源码下载] 返璞归真 asp.net mvc (8) - asp.net mvc ...
- 【Spring】Spring学习笔记-01-入门级实例
听说当前Spring框架很流行,我也准备好好学学Spring开发,并将学习的过程和大家分享,希望能对志同道合的同学有所帮助. 以下是我学习Spring的第一个样例. 1.Spring开发环境的搭建 我 ...