表單驗證神器——jquery.validate外掛程式

來源:互聯網
上載者:User

標籤:style   blog   http   color   io   os   ar   for   檔案   

jquery.validate.js外掛程式應用舉例,ajax方式提交資料。

html代碼:

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery.valisdate.js學習</title><style type="text/css">    table,td{border:0}    .error,.myerror{ color:#933;}</style></head><body><form id="commentForm" >    <table>      <tr>        <td><label for="username">帳號(必填,至少2個字元)</label></td>        <td>            <input id="username" name="username" type="text" />        </td>      </tr>      <tr>        <td>E-Mail(必填)</td>        <td>            <input id="email" type="email" name="email" />        </td>      </tr>      <tr>        <td colspan="2"><input class="submit" type="submit" value="Submit"/></td>      </tr>    </table></form><script src="jquery-1.11.1.js"></script><script src="jquery.validate.min.js"></script><script>$("#commentForm").validate({    rules:{        username:{            required:true            },        email:{            required:true,            email:true            }        },            messages:{        username:"請輸入使用者名稱",        email:{            required:"請輸入郵箱",            email:"郵箱格式錯誤"            }        },    // ajax方式提交    submitHandler: function(form)    {              $.ajax({            type:"post",            url:"check.php",            data:{                username:$("#username").val(),                email:$("#email").val(),            },            success:function(data){                if(data == ‘true‘){                    alert(‘註冊成功!‘);                }else{                    alert(‘使用者名稱已經被佔用!‘);                }            }        });    }    });// 這段代碼可以封裝到單獨的js檔案中,然後引入即可jQuery.extend(jQuery.validator.messages, {    required: "必選欄位",    remote: "請修正該欄位",    email: "請輸入正確格式的電子郵件",    url: "請輸入合法的網址",    date: "請輸入合法的日期",    dateISO: "請輸入合法的日期 (ISO).",    number: "請輸入合法的數字",    digits: "只能輸入整數",    creditcard: "請輸入合法的信用卡號",    equalTo: "請再次輸入相同的值",    accept: "請輸入擁有合法尾碼名的字串",    maxlength: jQuery.validator.format("請輸入一個 長度最多是 {0} 的字串"),    minlength: jQuery.validator.format("請輸入一個 長度最少是 {0} 的字串"),    rangelength: jQuery.validator.format("請輸入 一個長度介於 {0} 和 {1} 之間的字串"),    range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),    max: jQuery.validator.format("請輸入一個最大為{0} 的值"),    min: jQuery.validator.format("請輸入一個最小為{0} 的值")});</script></body></html>

php處理常式代碼:

<?php$username = $_POST[‘username‘];$email = $_POST[‘email‘];if($username == ‘user001‘){    echo ‘false‘;}else{    echo ‘true‘;    }

當使用者名稱輸入user001時,會提示使用者名稱已經被佔用。

文章轉自:http://www.zf-bbs.com/viewtopic.php?f=21&t=23

表單驗證神器——jquery.validate外掛程式

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.