Does it feel that a lot of repetitive work will be done to verify the validity of form input? Let's write a simple jQuery plug-in to simplify our work>
Code: http://files.cnblogs.com/qindgfly/jquery-checkform.rar
JS files
/* JQuery. checkform. js
*
* Check type:
* MustInput
* MustMoreThan
* MustLessThan
* MustEqualTo
* MustEmail
* MustInt
* MustFloat
* MustSelect
* MustCheck
* MustRadio:
* MustRegular
*
*/
JQuery. extend ({
Options :{
Ctrls: [], // controls to check
Success: function () {return;}, // When check success, you can do something, such as submit a ajax request
Failed: function (msg, id) {jQuery. clewMsg (msg, id);} // when check faild
},
ClewMsg: function (msg, id ){
Alert (msg );
},
CheckForm: function (o ){
O = jQuery. extend ({}, jQuery. options, o );
Var isok = true;
Var flashPrompt = function (ctr ){
Var I = 0;
Var intervalid = setInterval (function (){
JQuery ("#" + ctr. id). toggleClass ('warning ');
If (I ++> 2 ){
ClearInterval (intervalid );
JQuery ("#" + ctr. id). addClass ('warning ');
}
},100 );
};
// Check failed, we alert a message, and change the control's style
Var fail = function (ctr ){
Isok = false;
O. failed (ctr. msg, ctr. id );
FlashPrompt (ctr );
JQuery ("#" + ctr. id). focus ();
Return false;
}
// Check success, we change the control to its original style
Var succ = function (ctr ){
JQuery ("#" + ctr. id). removeClass ('warning ');
Return true;
}
// Regular express check
Var checkRegularExpression = function (val, expression ){
If (val! = "")
{
Var matchArray = val. match (expression );
If (matchArray = null) return false; else return true;
}
Else return true;
}
JQuery. each (o. ctrls, function (I, ctr ){
Switch (ctr. type)
{
Case "mustInput": if (jQuery ("#" + ctr. id). val () = "") return fail (ctr); else return succ (ctr );
Case "mustMoreThan": if (jQuery ("#" + ctr. id ). val (). length <ctr. par) return fail (ctr); else return succ (ctr );
Case "mustLessThan": if (jQuery ("#" + ctr. id ). val (). length> ctr. par) return fail (ctr); else return succ (ctr );
Case "mustEqualTo": if (jQuery ("#" + ctr. id). val ()! = JQuery ("#" + ctr. par). val () return fail (ctr); else return succ (ctr );
Case "mustEmail": if (! CheckRegularExpression (jQuery ("#" + ctr. id ). val (),/\ w + ([-+. '] \ w +) * @ \ w + ([-.] \ w + )*\. \ w + ([-.] \ w +) */) return fail (ctr); else return succ (ctr );
Case "mustInt": if (! CheckRegularExpression (jQuery ("#" + ctr. id ). val (),/^ [0-9] * jQuery/) return fail (ctr); else return succ (ctr );
Case "mustFloat": if (! CheckRegularExpression (jQuery ("#" + ctr. id ). val (),/^ [0-9] + \. {0, 1} [0-9] {0, 2} jQuery/) return fail (ctr); else return succ (ctr );
Case "mustSelect": if (jQuery ("#" + ctr. id). val () = ctr. par) return fail (ctr); else return succ (ctr );
Case "mustCheck": if (! JQuery ("#" + ctr. id). attr ("checked") return fail (ctr); else return succ (ctr );
Case "mustRadio": if (jQuery ("input [type = 'Radio '] [name ='" + ctr. id + "']: checked "). length <1) return fail (ctr); else return succ (ctr );
Case "mustRegular": if (! CheckRegularExpression (jQuery ("#" + ctr. id). val (), ctr. par) return fail (ctr); else return succ (ctr );
}
});
If (isok) o. success ();
}
});
Call:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default. aspx. cs" Inherits = "Test_JqueryPlus_jquery_checkform_Default" %>
<! 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 runat = "server">
<Title> No title page </title>
<Style type = "text/css">
. Warning-normal
{
Border: 1px solid # ccc;
}
. Warning
{
Border: 1px solid red;
}
</Style>
<Script src = "../jquery-1.2.6.js" type = "text/javascript"> </script>
<Script type = "text/javascript" src = "jquery. checkform. js"> </script>
<Script type = "text/javascript">
JQuery (function ($ ){
JQuery ("input, select, textarea"). addClass ("warning-normal ");
});
Function checkform ()
{
JQuery. checkForm ({
Ctrls :[
{Id: "txtUserName", type: "mustInput", par: "", msg: "please input your user name "},
{Id: "txtPassword", type: "mustInput", par: "", msg: "please input your password "},
{Id: "txtPassword", type: "mustMoreThan", par: "3", msg: "length of password must more than 3 "},
{Id: "txtPassword", type: "mustLessThan", par: "12", msg: "length of password less more than 12 "},
{Id: "txtPasswordAgain", type: "mustEqualTo", par: "txtPassword", msg: "password not math "},
{Id: "txtEmail", type: "mustEmail", par: "", msg: "the email you input is invalid! "},
{Id: "rdoSex", type: "mustRadio", par: "", msg: "select sex! "},
{Id: "txtTelephone", type: "mustEmail", par:/(\ d {3} \) | \ d {3 }-)? \ D {8}/, msg: "the telephone no. you input is invalid! "},
{Id: "txtAge", type: "mustInt", par: "", msg: "age can only be integer! "},
{Id: "txtWeight", type: "mustFloat", par: "", msg: "weight can only be float! "},
{Id: "selCountry", type: "mustSelect", par: "0", msg: "please select your country! "},
{Id: "txtRemark", type: "mustInput", par: "", msg: "please input remark "},
{Id: "chkAgree", type: "mustCheck", par: "", msg: "please check to agree our terms! "}
],
Success: function (){
$ ("# Divmsg" cmd.html ("");
$ ("# Divmsg"). hide ();
Alert ("form check success, now we will commit our data! ");
},
Failed: function (msg ){
$ ("# Divmsg" cmd.html (msg );
$ ("# Divmsg"). show ();
}
});
}
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Div id = "divmsg" style = "border-right: deepskyblue thin solid; display: none; margin: 0; padding: 0; border-top: deepskyblue thin solid;
Border-left: deepskyblue thin solid; width: 452px; color: # 3300ff; border-bottom: deepskyblue thin solid;
Height: 27px ">
</Div>
<Table style = "width: 455px">
<Tr>
<Td colspan = "2">
Jion to us </td>
</Tr>
<Tr>
<Td>
Username: & nbsp; </td>
<Td>
<Input id = "txtUserName" type = "text"/> </td>
</Tr>
<Tr>
<Td>
Password: </td>
<Td>
<Input id = "txtPassword" type = "password"/> </td>
</Tr>
<Tr>
<Td>
And once again? & Nbsp;
<Br/>
</Td>
<Td>
<Input id = "txtPasswordAgain" type = "text"/> </td>
</Tr>
<Tr>
<Td>
And your sex? </Td>
<Td>
<Input id = "Radio1" type = "radio" name = "rdoSex"/>
Male
<Input id = "Radio2" type = "radio" name = "rdoSex"/>
Female </td>
</Tr>
<Tr>
<Td>
Your telephone: </td>
<Td>
<Input id = "txtTelephone" type = "text"/> </td>
</Tr>
<Tr>
<Td>
Your email: </td>
<Td>
<Input id = "txtEmail" type = "text"/> </td>
</Tr>
<Tr>
<Td>
Your age: </td>
<Td>
<Input id = "txtAge" type = "text"/> </td>
</Tr>
<Tr>
<Td>
Your weight: </td>
<Td>
<Input id = "txtWeight" type = "text"/> </td>
</Tr>
<Tr>
<Td>
Country: </td>
<Td>
<Select id = "selCountry">
<Option value = "0"> select </option>
<Option value = "1"> China </option>
<Option value = "2"> USA </option>
<Option value = "3"> UK </option>
</Select>
</Td>
</Tr>
<Tr>
<Td>
Remark: </td>
<Td>
<Textarea id = "txtRemark" cols = "20" rows = "2"> </textarea> </td>
</Tr>
<Tr>
<Td>
</Td>
<Td>
<Input id = "chkAgree" type = "checkbox"/> I agree all the terms. </td>
</Tr>
<Tr>
<Td>
</Td>
<Td>
<Input id = "Button1" type = "button" value = "check form" onclick = "checkform ()"/> </td>
</Tr>
</Table>
</Div>
</Form>
</Body>
</Html>
Interface preview:
Isn't the code much reduced? When the verification fails, the text box still has an animation effect ..
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
