Yii框架中jquery表單驗(yàn)證插件用法示例
本文實(shí)例講述了Yii框架中jquery表單驗(yàn)證插件用法。分享給大家供大家參考,具體如下:
運(yùn)行效果圖如下:
視圖層:
<!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> // 手機(jī)號(hào)碼驗(yàn)證 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)); }, "請(qǐng)正確填寫您的手機(jī)號(hào)碼"); // 漢字 jQuery.validator.addMethod("uName", function(value, element) { var name= /^[\u4e00-\u9fa5]{2,6}$/; return this.optional(element) || (name.test(value)); }, "請(qǐng)輸入2-4個(gè)漢字"); //驗(yàn)證郵箱 jQuery.validator.addMethod("email1", function(value, element) { var email= /^\w+@\w+[.]com|cn|net$/; return this.optional(element) || (email.test(value)); }, "請(qǐng)正確填寫您的郵箱"); //驗(yàn)證名稱是否重復(fù)(唯一性) 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); }, "用戶名已存在"); //驗(yàn)證郵箱是否重復(fù) 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(); } }); //表單驗(yàn)證 $().ready(function() { // 在鍵盤按下并釋放及提交后驗(yàn)證提交表單 $("#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: "請(qǐng)輸入您的名字", u_name: { required: "請(qǐng)輸入用戶名", uName: "用戶名必需由2-6個(gè)漢字組成", onlyUsername:"用戶必須唯一" }, pwd: { required: "請(qǐng)輸入密碼", minlength: "密碼長度不能小于 5 個(gè)字母" }, phone: { required: "請(qǐng)輸入手機(jī)號(hào)" }, email: { required:"請(qǐng)輸入一個(gè)正確的郵箱", only2:"郵箱必須唯一" }, agree: "請(qǐng)接受我們的聲明", topic: "請(qǐng)選擇兩個(gè)主題", sex: "請(qǐng)至少選一個(gè)", fruit:"請(qǐng)至少選兩個(gè)水果" } }); }); </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">手機(jī)號(hào)</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">請(qǐng)同意我們的聲明</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>注意:如果沒有勾選“我樂意接收新信息”以下選項(xiàng)會(huì)隱藏,但我們這里作為演示讓它可見</legend> <label for="topic_marketflash"> <input type="checkbox" id="topic_marketflash" value="學(xué)習(xí)" name="topic[]">學(xué)習(xí) </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>
控制器(驗(yàn)證唯一性):
//驗(yàn)證姓名唯一性 public function actionOnly(){ $u_name=Yii::$app->request->get('u_name'); $login=Yii::$app->db; //查詢數(shù)據(jù) $sql="select * from login where u_name='$u_name'"; $res=$login->createCommand($sql)->execute(); if($res) { echo false; } else { echo true; } }
更多關(guān)于Yii相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《Yii框架入門及常用技巧總結(jié)》、《php優(yōu)秀開發(fā)框架總結(jié)》、《smarty模板入門基礎(chǔ)教程》、《php面向?qū)ο蟪绦蛟O(shè)計(jì)入門教程》、《php字符串(string)用法總結(jié)》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》
希望本文所述對(duì)大家基于Yii框架的PHP程序設(shè)計(jì)有所幫助。
- Yii的Srbac插件用法詳解
- Yii安裝EClientScript插件擴(kuò)展實(shí)現(xiàn)css,js文件代碼壓縮合并加載功能
- Yii2組件之多圖上傳插件FileInput的詳細(xì)使用教程
- Yii2實(shí)現(xiàn)ajax上傳圖片插件用法
- Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
- Yii2使用Bootbox插件實(shí)現(xiàn)自定義彈窗
- 從零開始學(xué)YII2框架(四)擴(kuò)展插件yii2-kartikgii
- 從零開始學(xué)YII2框架(三)擴(kuò)展插件yii2-gird
- 從零開始學(xué)YII2框架(二)通過 Composer 安裝擴(kuò)展插件
- Yii結(jié)合CKEditor實(shí)現(xiàn)圖片上傳功能
- Yii框架引用插件和ckeditor中body與P標(biāo)簽去除的方法
相關(guān)文章
PHP輸出英文時(shí)間日期的安全方法(RFC 1123格式)
這篇文章主要介紹了PHP輸出英文時(shí)間日期的安全方法,本文所指的英文時(shí)間日期為RFC 1123格式,總結(jié)了一個(gè)不受setlocale影響的函數(shù)gmdate,需要的朋友可以參考下2014-06-06layui框架實(shí)現(xiàn)文件上傳及TP3.2.3(thinkPHP)對(duì)上傳文件進(jìn)行后臺(tái)處理操作示例
這篇文章主要介紹了layui框架實(shí)現(xiàn)文件上傳及TP3.2.3對(duì)上傳文件進(jìn)行后臺(tái)處理操作,結(jié)合實(shí)例形式分析了layui框架結(jié)合thinkPHP進(jìn)行文件上傳與處理操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05php實(shí)現(xiàn)單筆轉(zhuǎn)賬到支付寶功能
這篇文章主要為大家詳細(xì)介紹了php實(shí)現(xiàn)單筆轉(zhuǎn)賬到支付寶功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10php驗(yàn)證碼實(shí)現(xiàn)代碼(3種)
這篇文章主要介紹了php驗(yàn)證碼實(shí)現(xiàn)代碼,純數(shù)字驗(yàn)證碼,數(shù)字加英文驗(yàn)證碼還有一種漢字驗(yàn)證碼,感興趣的小伙伴們可以參考一下2015-09-09Django 標(biāo)簽篩選的實(shí)現(xiàn)代碼(一對(duì)多、多對(duì)多)
這篇文章主要介紹了Django 標(biāo)簽篩選的實(shí)現(xiàn)代碼(一對(duì)多、多對(duì)多),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09PHP采集類snoopy詳細(xì)介紹(snoopy使用教程)
這篇文章主要介紹了PHP采集類snoopy詳細(xì)介紹,PHP采集類snoopy的詳細(xì)使用教程,需要的朋友可以參考下2014-06-06PHP模板引擎Smarty內(nèi)建函數(shù)section,sectionelse用法詳解
這篇文章主要介紹了PHP模板引擎Smarty內(nèi)建函數(shù)section,sectionelse用法,結(jié)合實(shí)例形式詳細(xì)分析了section,sectionelse進(jìn)行循環(huán)處理的技巧與使用方法,需要的朋友可以參考下2016-04-04php結(jié)合GD庫實(shí)現(xiàn)中文驗(yàn)證碼的簡單方法
這篇文章主要給大家介紹了關(guān)于php結(jié)合GD庫實(shí)現(xiàn)中文驗(yàn)證碼的簡單方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01yii2實(shí)現(xiàn)根據(jù)時(shí)間搜索的方法
這篇文章主要介紹了yii2實(shí)現(xiàn)根據(jù)時(shí)間搜索的方法,涉及Yii2時(shí)間的操作及數(shù)據(jù)查詢相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05