文档章节

表单验证那些事

我叫leo-
 我叫leo-
发布于 2016/04/01 09:24
字数 1429
阅读 43
收藏 6

今天来给大家说表单验证的一个demo,说的不好 欢迎批评,但是谢绝辱骂,谢谢合作!

好了 先上图:

效果如上图:用css框架和jquery-validate 做的~~希望有喜欢这个demo的朋友~

好了先说说: 布局就是用bootstrap做的,这个就不说了,还有那个日历也是一个插件;详细传送门http://www.bootcss.com/p/bootstrap-datetimepicker/
当然,日历插件也有做的不好的,比如会出现这个,我没有调过来,还有就是dome页面我都写好了注释了的!

接下来就是validate的引入,在引入前,必须要先引入jquery,因为那个是基于jq写的,不然会出现不了效果的~要注意哦~~
如图:

然后就是写规则:

  1. $(function(){  //jq写法 不解释

  2.  $('选中form节点').validate({

  3.    

  4.  rules:{

  5.   '表单名':{

  6.   '验证规则':对应的验证规则填写的值

  7.   }

  8.  },

  9. messages:{

  10.  '表单名(ps:和上面一样)':{

  11.  '验证规则':对应的验证错误时出现的错误提示(ps:如我提供的第一张图,显示用户名已存在的那个错误提示一样)

  12.  }

  13.  }

  14.  });

  15.  });

复制代码

好了规则就是这样了。来实战操作一下吧。比如现在有一个username的表单,就一个不做别的就简单验证一些,我们要求的规则是用户名长度是3-17位,必须验证.还有假设表单的id是register

有了以上规则,我们就来写:
  1. $(function(){

  2.   

  3. $('#register').validate({//先用jq的选择器选择到form表单

  4. rules:{

  5.  'username':{

  6. required:true,//这个规则就是必须验证,也就是必须填写的意思~

  7. rangelength:[3,17]//这个意思就是用户名长度是3-17位之间,这里主要的一点就是汉子是算一个字节的,不是像我们utf-8的一个汉字算3个字节那样的。主意哦~~

  8.  }

  9.  },

  10. messages{

  11. username:{

  12.  required:'用户名必须填写'//当用户名没有填写的时候提示的错误信息

  13. rangelength:'用户名长度应在3-17位之间'

  14.  }

  15.  }

  16.  })

  17.  })

复制代码

是不是感觉很实用,很简单的代码就能实线想要的效果!当然这只是一个简单的一个规则,还有更加复杂的比如验证用户名的时候 必须是字母开头 不允许汉字等等,这个就需要正则了吧,不过,哈哈 我正则不会~~不过我会继续学习的,我也是一个自学ThinkPHP的一员,

好了继续为大家介绍一下还有的其他的验证方式:
如图:
我的demo也有,还有就是自己也可以尝试着做一下!然后我们继续说一下异步验证的问题~
我先把我的验证的js贴出来:
  1. $(function(){

  2.     $('#register').validate({

  3.         errorElement:'span',

  4.         success:function(label){

  5.             label.addClass('success');

  6.             },

  7.         rules:{

  8.             'username':{

  9.                 required:true,

  10.                 rangelength:[3,17],

  11.                 remote:{

  12.                     url:checkUsername,

  13.                     type:'post',

  14.                     datatype:'json',

  15.                     data:{

  16.                         username:function(){

  17.                             return $('#username').val();

  18.                             }

  19.                         }

  20.                     }

  21.                 },

  22.             'password':{

  23.                 required:true,

  24.                 rangelength:[6,17]

  25.                 },

  26.             'rpassword':{

  27.                 required:true,

  28.                 equalTo:'#password'

  29.                 },

  30.             'email':{

  31.                 required:true,

  32.                 email:true

  33.                 },

  34.             'sex':{

  35.                 required:true

  36.                 },

  37.             'birthday':{

  38.                 required:true,

  39.                 date:true

  40.                 },

  41.             'address':{

  42.                 required:true

  43.                 },

  44.             'old':{

  45.                 required:true,

  46.                 digits: true,

  47.                 rangelength:[1,3]

  48.                 },

  49.             'tel':{

  50.                 required:true,

  51.                 digits: true,

  52.                 rangelength:[0,11]

  53.                 }

  54.             },

  55.         messages:{

  56.             'username':{

  57.                 required:'用户名必须填写',

  58.                 rangelength:'用户名长度应在3-17位之间',

  59.                 remote:'用户名已存在'

  60.                 },

  61.             'password':{

  62.                 required:'密码必须填写',

  63.                 rangelength:'密码必须在6-17位之间'

  64.                 },

  65.             'rpassword':{

  66.                 required:'确认密码必须填写',

  67.                 equalTo:'两次密码不一致'

  68.                 },

  69.             'email':{

  70.                 required:'邮箱必须填写',

  71.                 email:'邮箱格式不正确'

  72.                 },

  73.             'sex':{

  74.                 required:'请选择性别'

  75.                 },

  76.             'birthday':{

  77.                 required:true

  78.                 },

  79.             'address':{

  80.                 required:'请填写地址',

  81.                 date:'日期格式不正确'

  82.                 },

  83.             'old':{

  84.                 required:'请填写年龄',

  85.                 digits: '您输入的不是数字',

  86.                 rangelength:'您输入的年龄不符合格式(ps:吓死我了)'

  87.                  },

  88.             'tel':{

  89.                 required:'请填写电话号码',

  90.                 digits: '您输入的不是数字',

  91.                 rangelength:'请输入正确格式的电话号码(ps:需要11位)'

  92.                 }

  93.             }

  94.         

  95.         });

  96.         

  97.         

  98.     });

复制代码

其他的我们不说,就来说说remote,这个验证方法。
这个验证就是用异步去验证的了。
remote:{
url:这里就是填写你用于验证的url,在这个地方我们是用控制器里面的方法去验证的,我们就可以在模版里面申明一个变量,然后变量的值就是用U方法去生成那个用于验证的方法的不包含网址的url路径就可以了,
type:这个就是传输的类型我一般都是填写post
datatype:这个就是数据类型,一般填写json
data:{
username:function(){//前面的username是表单的name名称
return $('#username').val();//这里的就是表单的id或者class名,其实这里表单名称和id名都写一样的就好了,就用不着去怕写错了~~哈哈
}
}
}


然后提交的时候用firebug去填写username表单的东西后,按一下tab见在firebug的网络里面,就会异步一个值:
如图:
这个就是发送了你填写的值到那个控制器,然后我们在那个控制器写if判断就好了,是不是这样的思路你也能做了。
控制器方法代码:
  1. //验证用户名是否存在

  2.         public function checkUsername(){

  3.             if(!$this->isAjax()) halt('页面不存在');//最好做个判断,

  4.             

  5.             $where = array(

  6.               'menbername'=>I('username'),

  7.             );

  8.             if(M('menber')->where($where)->find()){

  9.                 echo 'false';//切记这是重点

  10.                 }else{

  11.                 echo 'true';

  12.                     }

  13.             

  14.             }

复制代码

当存在我们是要返回字符串格式的false过去,一定要记住啊~不然你会调试代码很惨的。就像我以前第一次写一样,尼玛 一直发现没哪里有问题,一直调试,心情比大姨妈来了还沉重!

好了 到此,已经结束了,应该写完了吧,要是写错了,欢迎提出来,我会重新修改的!谢谢

本文转载自:http://www.thinkphp.cn/topic/4211.html

我叫leo-
粉丝 1
博文 35
码字总数 1675
作品 0
郑州
程序员
私信 提问
表单验证第三部分: 一个Validity State API Polyfill

表单验证第三部分: 一个Validity State API Polyfill W3CPlus2017-08-078 阅读 表单api验证 在这个系列的 上一篇 文章中, 我们创建了一个轻量级的脚本 (6kb, 2.7kb缩小后) 使用这个 Validity...

W3CPlus
2017/08/07
0
0
angular学习(十一)—— Form

转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/54972551 form control主要用于接收用户输入,例如input, select, textarea。而form是一组相关控件的集合。form和c...

lastsweetop
2017/02/10
0
0
表单验证第二部分: 约束验证 API

表单验证第二部分: 约束验证 API W3CPlus2017-08-0710 阅读 表单约束api验证 在 上一篇文章中 , 我向大家展示了如何通过组合输入类型 (例如, ) 和验证属性 (像 和 )来使用原生的浏览器表单验...

W3CPlus
2017/08/07
0
0
表单验证第一部分:使用 HTML 和 CSS技巧对表单进行约束验证

表单验证第一部分:使用 HTML 和 CSS技巧对表单进行约束验证 W3CPlus2017-08-0757 阅读 技巧约束表单html验证css 大多数的JavaScript表单验证类库体积都非常庞大,而且往往需要引入其他的库,...

W3CPlus
2017/08/07
0
0
一款比较实用齐全的jQuery 表单验证插件

一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网址,数字...

晨曦之光
2012/03/09
134
0

没有更多内容

加载失败,请刷新页面

加载更多

VMware vSphere ESXi主机的访问控制

在vShpere中,访问ESXi主机的途径很多,如下: ESXi DCUI ESXi Shell ESXi SSH ESXi Host Client vCenter --> vSphere web client / vSphere Client VMware vSphere ESXi主机的访问控制,除了......

大别阿郎
33分钟前
4
0
大神讲解CGI、FastCGI和PHP-FPM关系图解

参考资料 概念了解:CGI,FastCGI,PHP-CGI与PHP-FPM:http://www.nowamagic.net/librarys/veda/detail/1319 php中fastcgi和php-fpm是什么东西:https://www.zybuluo.com/phper/note/50231 ......

网络小虾米
42分钟前
4
0
《DNS攻击防范科普系列3》 -如何保障 DNS 操作安全

引言 前两讲我们介绍了 DNS 相关的攻击类型,以及针对 DDoS 攻击的防范措施。这些都是更底层的知识,有同学就来问能否讲讲和我们的日常操作相关的知识点,今天我们就来说说和我们日常 DNS 操...

Mr_zebra
43分钟前
4
0
zk中ServerCnxn

实现接口Stats, Watcher 内部类 DisconnectReason CloseRequestException EndOfStreamException(流关闭) 属性 方法 getSessionTimeout 获取session失效时间 sendResponse 发送回复数据 se......

writeademo
48分钟前
4
0
如何将 Redis 用于微服务通信的事件存储

来源:Redislabs 作者:Martin Forstner 翻译:Kevin (公众号:中间件小哥) 以我的经验,将某些应用拆分成更小的、松耦合的、可协同工作的独立逻辑业务服务会更易于构建和维护。这些服务(也...

中间件小哥
51分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部