首頁 > 開發者 > JavaScript

jquery外掛程式 驗證表單

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

看著網上關於表單驗證寫的太淩亂 業餘時間寫了一個表單外掛程式 供大家鑒賞與指教吧

<!DOCTYPE html>
<html>
<head>
    <title>驗證表單外掛程式</title>
    <meta charset="utf-8">
    <style type="text/css">
        *{margin:0;padding:0;color:#000;}
        .content{width:700px;height:400px;margin:-200px 0 0 -350px;position:absolute;top:50%;left:50%;background:#ccc;padding-top:20px;}
        p{line-height:22px;overflow:hidden;padding:5px;}
        span,input{display:inline-block;vertical-align:top;}
        span{text-align:right;width:150px;}
        input{margin:0 10px;padding:2px;border:solid 1px #000;}
        input.focus{
        border:solid 1px red;
        }
        input.current{border:solid 1px green;}
        .error{text-align:left;color:red;width:350px;display:none;}
        h2{text-align: center;margin-bottom:15px;}
        .btn{background:blue;color:white;border:0;display:inline-block;width:60px;height:25px;line-height:25px;text-align:center;text-decoration:none;margin-left:10px;}
    </style>
    <script type="text/javascript" src="jquery-1.9.js"></script>
    <script src="validate.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $(".content").validate({
                            'cID':'oBtn',
                            'PassI':'password',
                            'PassII':'confirmpassword'
                        });
    //參數為 提交按鈕 ID為oBtn PassII PassI 分別為 密碼的屬性值(可選)
    })
    </script>
</head>
<body>
<div class="content">
    <h2>表單驗證</h2>
    <p><span>使用者名稱：</span><input type="text" name="userName" reg="\w+"><span class="error">使用者名稱只能是字母、數字和底線</span></p>
    <p><span>密碼：</span><input type="password" name="password" reg="[a-zA-Z]+"><span class="error">密碼只能是字母</span></p>
    <p><span>再一次輸入密碼：</span><input type="password" name="confirmpassword" reg="[a-zA-Z]+" algin="驗證兩次密碼是否一致"><span class="error">密碼只能是字母,與之前輸入的密碼相同</span></p>
    <p><span>郵箱：</span><input type="text" name="email" reg="\w+@[a-zA-Z0-9]+(\.[a-z]{2,6}){1,3}"><span class="error">輸入郵箱不合法</span></p>
    <p><span>QQ：</span><input type="text" name="qq" reg="[1-9]\d{4,12}"><span class="error">QQ號只能是數字</span></p>
    <p><span>年齡：</span><input type="text" name="age" reg="([1-9][2-9])|(100)"><span class="error">年齡只能是數字，並且大於12歲，小於100歲</span></p>
    <p><span>電話：</span><input type="text" name="tell" reg="0[1-9]\d{1,2}-[1-9]\d{6,7}"><span class="error">區號-數字</span></p>
    <p><span>身份證：</span><input type="text" name="IDcard" reg="\d{15}$)|(^\d{17}([0-9]|X)"><span class="error">社會安全號碼碼為15位或者18位</span></p>
    <p><span></span><a id="oBtn" class="btn" href="javascript：;">驗證</a></p>
</div>
</body>
</html>


/**
 * 表單驗證外掛程式
 * @authors 俠客行(554094147@qq.com)
 * @date    2013-06-13 14:21:26
 * @version $Id$
 */
;(function($){
$.fn.extend({
validate:function(options){
var defaults={
'PassI':'',
'PassII':''
};//預設是空
var opts = $.extend({},defaults,options);
var _input = this.find('input');//取所有的input
_input.each(function(){
var _reg = $(this).attr('reg');
var _this = $(this);
if(_reg){
(function(_reg){
_this.focus(function(){
_this.addClass("focus");
});
_this.blur(function(){
checkPass(_this,_reg)
})
})(_reg)
}
})
function fnCheck(_input){
if(opts.PassI){
if(_input.attr('name')==opts.PassII)
{
var oPass1=document.getElementsByName(opts.PassI)[0];
if(_input.val()==oPass1.value)
{


return true;
}
else
{
return false;
}
}
}
return true;
}
function checkPass(OText,_reg){
var re = new RegExp('^('+_reg+')$');
var oNext = OText.next();
if(re.test(OText.val())){
if(fnCheck){
if(fnCheck(OText)){
OText.addClass('current');
oNext.hide();
return true;
}
else{
OText.addClass("focus");
oNext.css('display','inline-block');
return false;
}
}
else{
OText.addClass('current');
oNext.hide();
return true;
}


}
else{
OText.addClass("focus");
oNext.css('display','inline-block');
return false;
}
}
$('#'+opts.cID).click(function(){
var error=false; //假設沒有填錯
_input.each(function(){
var _reg = $(this).attr('reg');
if(_reg){
if(!checkPass(_input,_reg)){
error=true;
}
}
})
if(error){
return false //驗證失敗
}
})


}
})
})(jQuery)


 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More