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

2024-12-01 06:43:13

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

Yii2组件之多图上传插件FileInput的详细使用教程

在前面给大家写个有关文件上传的文章,包括最基本的yii2文件上传.异步上传到又拍云以及百度编辑器图片上传的问题,貌似不说点多图上传的就不完美. 今天介绍一款多图上传的插件 FileInput,至于为什么选中了TA作为我们上传的插件,一来这货跟Yii2有一腿,用起来方便:二来嘛,用这个插件不仅添加的时候好操作,修改的时候也可以直接通过异步的方式将图片悄无声息的删掉:最值得一提的是,界面效果融合了bootstrap,清爽简洁美观,看起来舒服. 说重点,看具体步骤首先还是先安装组件复制代码代码如
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法

本文实例讲述了Yii2框架引用bootstrap中日期插件yii2-date-picker的方法.分享给大家供大家参考,具体如下: 最近在学习yii2 框架,发现框架很强大,而且结合了时下许多新的技术在里面. 简单记录一下yii2-date-picker插件的使用方法: 首先先了解一下github中的相关资源:https://github.com/2amigos/yii2-date-picker-widget 其次:在自己的项目中利用上面链接中的相关方法下载此资源,命令为: php compos
Yii的Srbac插件用法详解

本文实例讲述了Yii的Srbac插件用法.分享给大家供大家参考,具体如下: Yii的rbac,从开始安装arbc模块扩展,到调试分析其原理,断断续续地也花了不少时间.当然你了解它后,你会发现,yii的abrc是多的方便, 可以让你轻松实现资源控制访问,非常强大.现在就整理下学习笔记,分享一下.虽然authMangner组件实现了rbac,但是没有实现可视化编辑管理.目前官方有Srbac 和 Right两个比较好的扩展模块,我们用它们非常方便的可视化管理角色(roles),任务(tasks),操
Yii2实现ajax上传图片插件用法

本文实例讲述了Yii2实现ajax上传图片插件用法.分享给大家供大家参考,具体如下: 这里需要先下载 mdmsoft/yii2-upload-file.插件. 代码如下: public function actionCreate() { $model = new DynamicModel([ 'nama', 'file_id' ]); // behavior untuk upload file $model->attachBehavior('upload', [ 'class' => 'mdm
Yii结合CKEditor实现图片上传功能

这几天做的一个项目中需要在所见即所得编辑器中实现图片上传的功能,我因为比较喜欢CKEditor的界面而选择了它.虽然有跟CKEditor配合良好的CKFinder,不过这个东东的功能太复杂,简单看了下CKEdtior的文档,发现这个功能还是可以自己实现而不用借助CKFinder的. 下面代码虽然基于Yii Framework的,但是用其他框架或者语言思路却是完全一样的,有需要的童鞋可以参考一下. 首先要让CkEditor出现图片上传的功能,需要配置编辑器的filebrowserImageUplo
从零开始学YII2框架（四）扩展插件yii2-kartikgii

今天发现了一款好用的插件yii2-kartikgii.它是基于系列插件kartik-v的拓展. 插件介绍这个插件主要功能是帮助你在使用gii生成代码curd的时候生成kartik-gird的.不需要每次用默认的gii工具生成代码之后再手动添加kartik-gird,这正是我想要的功能.快速生成kartik-grid. 学习这个插件之前你可能需要了解下yii2-gird插件:传送门插件安装与配置直接看插件网址: http://www.yiiframework.com/extension/yi
Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能

本文实例讲述了Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能.分享给大家供大家参考,具体如下: 扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,components里面增加 //js,css代码压缩,合并 'clientScript' => array( 'class' => 'application.ven
从零开始学YII2框架（二）通过 Composer 安装扩展插件

目前yii2的扩展还不是很多,截止到今天,在官网一共有33个,不过这些插件中不乏有优秀的扩展插件, 我尝试了几个,发现了一系列好用的Yii2插件,作者是来自印度的krajee团队,他们写的插件都很好用.推荐一下. krajee团队的网站:http://krajee.com,有几个不错的插件可以尝试. 下面来介绍Yii2的插件安装方法.通过Composer安装插件yii2-detail-view. Git 推荐安装Git,Composer安装插件时候会用到Git Clone,Git官方下载网站:传
从零开始学YII2框架（三）扩展插件yii2-gird

yii2-gird 插件是Yii2.0的一个扩展.它在官方的girdview基础上扩展了一些实用的功能. 比如: 把表格包装在bootstrap - panel标签下,使之更美观: Float Header功能,实现滑动表格的时候,表字段至于屏幕上方,方便查看: 新增操作栏说明label: 页面统计功能: 新增重置表格功能: 新增导出表格功能,包括四种常用格式[html.CSV.txt.Excel]. 非常感谢Kartik团队带来的好用的插件.Kartik团队的其他插件也很好用的.推荐试用. 安
Yii2使用Bootbox插件实现自定义弹窗

本次尝试了一个新的小插件"bootbox". Yii2中使用了Bootstarp,让界面更美观,可是美中不足的是,在Gridview表格的Action里,删除功能的弹窗实在有点与Bootstrap违和,网上找到了一种解决方案,分享下使用此插件的过程. Bootbox.js,是一个小型的JavaScript库用来创建简单的可编程对话框,基于Bootstrap的Modal(模态框)来创建. 官方说明 http://bootboxjs.com/v3.x/index.html Bootbox.
Yii框架引用插件和ckeditor中body与P标签去除的方法

本文实例讲述了Yii框架引用插件和ckeditor中body与P标签去除的方法.分享给大家供大家参考,具体如下: 在Yii中引用插件注:插件和扩展不一样 1,源码放在project/ckeditor/* 2,在代码create,update中引用 Php代码 <?php include_once "/ckeditor/ckeditor.php"; // Create a class instance. $CKEditor = new CKEditor(); // Path to

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

相关推荐

随机推荐