Yii框架中jquery表单验证插件用法示例
更新时间:2016年10月20日 10:11 点击:1323
本文实例讲述了Yii框架中jquery表单验证插件用法。分享给大家供大家参考,具体如下:
运行效果图如下:
视图层:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> <style> .error{ color: red; } </style> <script src="js/jquery.js"></script> <script src="js/jquery.validate.js"></script> <script src="js/messages_zh.js"></script> <script> // 手机号码验证 jQuery.validator.addMethod("phone", function(value, element) { var length = value.length; var mobile = /^1[3,5,8][0-9]{9}$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "请正确填写您的手机号码"); // 汉字 jQuery.validator.addMethod("uName", function(value, element) { var name= /^[\u4e00-\u9fa5]{2,6}$/; return this.optional(element) || (name.test(value)); }, "请输入2-4个汉字"); //验证邮箱 jQuery.validator.addMethod("email1", function(value, element) { var email= /^\w+@\w+[.]com|cn|net$/; return this.optional(element) || (email.test(value)); }, "请正确填写您的邮箱"); //验证名称是否重复(唯一性) jQuery.validator.addMethod("onlyUsername", function(value, element) { return eval($.ajax({ url: "index.php?r=login/only", type: 'get', async: false, data: { u_name:value } }).responseText); }, "用户名已存在"); //验证邮箱是否重复 jQuery.validator.addMethod("only2", function(value, element) { return eval($.ajax({ url: "index.php?r=login/only2", type: 'get', async: false, data: { email:value } }).responseText); }, "邮箱已存在"); $.validator.setDefaults({ submitHandler: function() { form.submit(); } }); //表单验证 $().ready(function() { // 在键盘按下并释放及提交后验证提交表单 $("#signupForm").validate({ rules: { u_name: "required", u_name: { required: true, uName: true, onlyUsername: true }, pwd: { required: true, minlength: 5 }, fruit:{ required: true, minlength: 2 }, phone: { required: true }, email: { required: true, email: true, email1:true, only2:true }, sex: { required:true, minlength:1 }, topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required" }, messages: { u_name: "请输入您的名字", u_name: { required: "请输入用户名", uName: "用户名必需由2-6个汉字组成", onlyUsername:"用户必须唯一" }, pwd: { required: "请输入密码", minlength: "密码长度不能小于 5 个字母" }, phone: { required: "请输入手机号" }, email: { required:"请输入一个正确的邮箱", only2:"邮箱必须唯一" }, agree: "请接受我们的声明", topic: "请选择两个主题", sex: "请至少选一个", fruit:"请至少选两个水果" } }); }); </script> </head> <body> <center> <form class="cmxform" id="signupForm" method="post" action="index.php?r=login/register"> <fieldset> <legend>注册页面</legend> <p> <label for="u_name">名字</label> <input id="u_name" name="u_name" type="text"> </p> <p> <label for="pwd">密码</label> <input id="pwd" name="pwd" type="pwd"> </p> <p> <label for="email">Email</label> <input id="email" name="email" type="email"> </p> <p> <label for="phone">手机号</label> <input id="phone" name="phone" type="phone"> </p> <p> <input type="radio" id="sex" value="男" name="sex" />男 <input type="radio" id="sex" value="女" name="sex"/>女 </p> <p> <select id="fruit" name="fruit[]" multiple="multiple"> <option value="b">Banana</option> <option value="a">Apple</option> <option value="p">Peach</option> <option value="t">Turtle</option> </select> </p> <p> <label for="agree">请同意我们的声明</label> <input type="checkbox" class="checkbox" id="agree" name="agree"> </p> <p> <label for="newsletter">我乐意接收新信息</label> <input type="checkbox" class="checkbox" id="newsletter" name="newsletter"> </p> <fieldset id="newsletter_topics"> <legend>注意:如果没有勾选“我乐意接收新信息”以下选项会隐藏,但我们这里作为演示让它可见</legend> <label for="topic_marketflash"> <input type="checkbox" id="topic_marketflash" value="学习" name="topic[]">学习 </label> <label for="topic_fuzz"> <input type="checkbox" id="topic_fuzz" value="唱歌" name="topic[]">唱歌 </label> <label for="topic_digester"> <input type="checkbox" id="topic_digester" value="跳舞" name="topic[]">跳舞 </label> <label for="topic" class="error">Please select at least two topics you'd like to do.</label> </fieldset> <p> <input class="submit" type="submit" value="注册"> </p> </form> </center> </body> </html>
控制器(验证唯一性):
//验证姓名唯一性 public function actionOnly(){ $u_name=Yii::$app->request->get('u_name'); $login=Yii::$app->db; //查询数据 $sql="select * from login where u_name='$u_name'"; $res=$login->createCommand($sql)->execute(); if($res) { echo false; } else { echo true; } }
更多关于Yii相关内容感兴趣的读者可查看本站专题:《Yii框架入门及常用技巧总结》、《php优秀开发框架总结》、《smarty模板入门基础教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》
希望本文所述对大家基于Yii框架的PHP程序设计有所帮助。
上一篇: 详解PHP原生DOM对象操作XML的方法
下一篇: php封装的mysqli类完整实例
相关文章
- Query架构的开发人员能够创建一个插件代码来扩展其功能,从而能够产生一些最好的插件,让你的网站或任何给定的项目达到一个全新的水平。 ...2016-04-27
- 这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
基于RequireJS和JQuery的模块化编程——常见问题全面解析
下面小编就为大家带来一篇基于RequireJS和JQuery的模块化编程——常见问题全面解析。小编觉得挺不错的,现在分享给大家,也给大家做个参考...2016-04-17- 这篇文章主要为大家详细介绍了bootstrapValidator自定验证方法写法,研究bootstrapValidator验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 本文给大家分享的是如何在Node.js中使用jQuery的方法,包含步骤以及出错的处理,非常的详细,有需要的小伙伴可以参考下...2016-09-01
- 这篇文章主要为大家详细介绍了前端笔记之jquery部分,jQuery是一个兼容多浏览器的javascript库...2016-05-05
jQuery form 表单验证插件(fieldValue)校验表单
这篇文章主要介绍了jQuery form 表单验证插件(fieldValue)校验表单的相关资料,需要的朋友可以参考下...2016-01-25- JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。接下来通过本文给大家介绍Javascript的表单验证-初识正则表达式,对js表单验证正则表达式相关知识感兴趣的朋友一起学习吧...2016-03-22
- 在Node.js中使用jQuery的做法,需要先安装jquery,npm install jquery ,安装后的版本是 3.1.0,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看下吧...2016-08-24
- 这篇文章主要介绍了Yii框架实现图片上传的方法,结合实例形式较为详细的分析了Yii框架实现图片上传功能的具体步骤与相关操作技巧,需要的朋友可以参考下 本文实例...2017-07-06
- 这篇文章主要介绍了jQuery中通过ajax的get()函数读取页面的方法,需要的朋友可以参考下...2016-03-01
- 这篇文章主要帮助大家拥有一个属于自己的javascript表单验证插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-03-28
- JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。通过本文给大家介绍Javascript的表单验证-提交表单,对javascript表单验证,提交表单相关知识感兴趣的朋友一起学习吧...2016-03-22
- 这篇文章主要为大家详细介绍了jquery表单验证插件validation使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
AngularJS使用angular-formly进行表单验证
这篇文章主要介绍了AngularJS使用angular-formly进行表单验证的相关资料,需要的朋友可以参考下...2015-12-29- 这篇文章主要为大家详细介绍了JS实现支持Ajax验证的表单插件,感兴趣的小伙伴们可以参考一下...2016-03-28
- 这篇文章主要介绍了Yii框架实现邮箱激活的方法,基于邮箱发送邮件实现数字签名的激活功能,需要的朋友可以参考下...2016-10-20
在Web项目中引入Jquery插件报错的完美解决方案(图解)
这篇文章主要介绍了在Web项目中引入Jquery插件报错的完美解决方案的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-10-03CSS3 media queries结合jQuery实现响应式导航
这篇文章主要为大家详细介绍了CSS3 media queries结合jQuery实现响应式导航,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-02Bootstrap 表单验证formValidation 实现表单动态验证功能
这篇文章主要介绍了Bootstrap 表单验证formValidation 实现表单动态验证功能,需要的朋友可以参考下...2017-05-22