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 相关文章推荐
PHP中用hash实现的数组
Jul 17 PHP
PHP无刷新上传文件实现代码
Sep 19 PHP
获取PHP警告错误信息的解决方法
Jun 03 PHP
将php数组输出html表格的方法
Feb 24 PHP
PHP中使用xmlreader读取xml数据示例
Dec 29 PHP
php实现图片上传并利用ImageMagick生成缩略图
Mar 14 PHP
PHP内置加密函数详解
Nov 20 PHP
Yii框架弹出框功能示例
Jan 07 PHP
PHP 二级子目录(后台目录)设置二级域名
Mar 02 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
Nov 08 PHP
php实现mysql连接池效果实现代码
Jan 25 PHP
PHP应用跨时区功能的实现方法
Mar 21 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代码
2012/07/17 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
理解JavaScript中的事件
2006/09/23 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
简单了解python列表和元组的区别
2020/05/14 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
便利店投资的创业计划书
2014/01/12 职场文书
教师一岗双责责任书
2014/04/16 职场文书
住宅质量保证书
2014/04/29 职场文书
求职信名称怎么写
2014/05/26 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
团队会宣传标语
2014/10/09 职场文书
六查六看六改心得体会
2014/10/14 职场文书
2014年采购部工作总结
2014/11/20 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
mysql数据库实现设置字段长度
2022/06/10 MySQL