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

5年以前 | 阅读数：672 次 | 编程语言：PHP

本文实例讲述了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程序设计有所帮助。