效果图：

视图层：

<!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>

控制器（验证唯一性）：

yii框架中应用jquery表单验证插件的更多相关文章

  1. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  2. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  3. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  4. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  5. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...

  6. 强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...

  7. 轻量级实用JQuery表单验证插件：validateForm5

    表单验证是Web项目一个必不可少的环节,而且是一项重复的劳动,于是小菜封装了一款简单的表单验证插件,名字叫:validateForm5. validateForm5插件基于Jquery,并向HTML5 ...

  8. Jquery表单验证插件validate

    写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...

  9. jQuery 表单验证插件——Validation(基础)

    这个插件不错,是用jquery写的.能进行表单验证.我喜欢它的原因是因为 1.他有自带的验证规则 2.你可以自己写验证规则 3.可以通过ajax与后台交互,与后台数据比较.最后返回结果!我在表单中要验 ...

随机推荐

  1. pro7

    1.本次课学习到的知识点: 函数的作用 确定函数的功能 定义函数 调用函数 2.实验过程中遇到的问题及解决方法: 定义函数时 变量的定义会出现混乱 通过看例题 多练习 逐渐熟悉 需从数学角度解决问题时 ...

  2. 读书笔记——《图解TCP/IP》（1/4）

    读书笔记——<图解TCP/IP>(1/4) 经典摘抄 第一章 网络基础知识 1.独立模式:计算机未连接到网络,各自独立使用的方式. 2.广域网 WAN 局域网 LAN 城域网 MAN 3. ...

  3. 毕老师的Editplus

    简介 EditPlus是一款由韩国 Sangil Kim (ES-Computing)出品的小巧但是功能强大的可处理文本.HTML和程序语言的Windows编辑器,你甚至可以通过设置用户工具将其作为C ...

  4. django internal search

    最近改进了项目中的站内搜索的功能,增加了全文索引,提升了搜索速度.因为项目框架是django,所以采用django+haystack+pyelasticsearch+elasticsearch的方式实 ...

  5. 转：Asp.net Mvc4默认权限详细（上）

    前言 上篇的菜鸟去重复之Sql的问题还没有得到满意的答案.如果哪位大哥有相关的资料解释,能够分享给我,那就太谢谢了. 以后每发表一篇博文我都会将以前遗留的问题在前言里指出,直到解决为止. 本文主要在于 ...

  6. magento去掉小数点后面的0

     <?php echo $_product->getPrice()?> PHP number_format() 函数  <?php echo number_format($_p ...

  7. Codeforces Round #367 (Div. 2)---水题 | dp | 01字典树

    A.Beru-taxi 水题:有一个人站在(sx,sy)的位置,有n辆出租车,正向这个人匀速赶来,每个出租车的位置是(xi, yi) 速度是 Vi;求人最少需要等的时间: 单间循环即可: #inclu ...

  8. Hubilder用git插件安装使用

    打开Hbuilder,工具->插件安装(git分布式版本管理插件) 打开https://www.github.com,注册.登录.创建仓库 在Hbuilder中新建项目→然后右键→Team→共享 ...

  9. ul和ol的一些知识

    ul和ol的一些知识 div#div0 ul{ border:1px solid #ccc; list-style:none; } div#div0 ul li{ border:1px solid g ...

  10. SEO优化笔记

    1,清理垃圾代码. 清理垃圾代码是指删除页面中的冗余代码,可以删除80%的冗余代码,垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码.最常见的垃圾代码:空格空格字符是网页中最常见的垃圾代码. ...