Yii框架中jquery表单验证插件用法示例


Posted in PHP onOctober 18, 2016

本文实例讲述了Yii框架中jquery表单验证插件用法。分享给大家供大家参考,具体如下:

运行效果图如下:

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框架的PHP程序设计有所帮助。

PHP 相关文章推荐
?繁体转换的class
Oct 09 PHP
php部分常见问题总结
Mar 27 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
Jun 28 PHP
php获得用户ip地址的比较不错的方法
Feb 08 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
Sep 06 PHP
使用Appcan客户端自动更新PHP版本号(全)
Jul 31 PHP
php版微信公众平台开发之验证步骤实例详解
Sep 23 PHP
PHP中大括号'{}'用法实例总结
Feb 08 PHP
PHP简单实现合并2个数字键数组值的方法
May 30 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
Apr 02 PHP
PHP正则之正向预查与反向预查讲解与实例
Apr 06 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
Apr 23 PHP
Yii框架实现邮箱激活的方法【数字签名】
Oct 18 #PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
Oct 18 #PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
Oct 18 #PHP
利用PHP绘图函数实现简单验证码功能的方法
Oct 18 #PHP
Yii针对添加行的增删改查操作示例
Oct 18 #PHP
Yii遍历行下每列数据的方法
Oct 17 #PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
Oct 17 #PHP
You might like
在php中取得image按钮传递的name值
2006/10/09 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
PHP实现搜索相似图片
2015/09/22 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
python K近邻算法的kd树实现
2018/09/06 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
计算机工程学院个人求职信
2013/10/05 职场文书
人事助理岗位职责
2013/11/18 职场文书
《风筝》教学反思
2014/04/10 职场文书
锦旗标语大全
2014/06/23 职场文书
仲裁协议书
2014/09/26 职场文书
岗位职责范本大全
2015/02/26 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
八年级语文教学反思
2016/03/03 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers