How to use form validation Plug-ins ValidForm

The first step: the introduction of JS and CSS in the foreground HTML file:

<link rel= "stylesheet" href= ' __root__/public/js/validform/style.css '/>

<script src= ' __root__/public/js/jquery.js ' ></script>

<script src= ' __root__/public/js/validform/validform.js ' ></script>

This column more highlights: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/tools/

Step two: Front desk form:

1 datatype: Sets the data type of the text box content, for example: Datatype= "n6-6": six digits, datatype= ' *6-12 ': password is 6--12 bit (alphanumeric or other symbols)

2 errormsg: Information output When an error occurs in the input content

3 nullmsg: Information that is output when the content is empty

4 Ajaxurl: Methods for submitting to background execution

5 <font class= "Validform_checktip" ></FONT>: Output information

For example:

<form class= ' form ' action= ' login ' method= ' post ' name= ' MyForm ' >

<div>

&NBSP User type:

<select name= ' user_type ' id= ' user_type ' style= ' width:135px ' >

<option value= ' 1 ' > Teachers </option>

<option value= ' 2 ' > Admin </option>

</select><br/></br>

</div>

<div>

&NBSP account Number: <input type= ' text ' id= ' idcard ' name= ' idcard ', ' style= ' width:135px ' "ajaxurl= ' Datatype= "n6-6" errormsg= account number is 6 digits "nullmsg=" account cannot be empty! "/><font class=" Validform_checktip "></font><br/><br/>

</div>

<div>

&nbsp Password: <input type= ' password ' id= ' pwd ' name= ' ' pwd ', ' style= ' width:135px ' datatype= ', ' *6-12 ' ' errormsg= ' the password is 6--12 digits nullmsg= ' Please enter password '/><font class= ' Validform_checktip ' ></font><br/><br/>

</div>

<div class= ' pas ' >

<input id= ' check ' type= ' checkbox '/>&nbsp<font id= ' keep ' color= ' darkorange ' > Remember password </font>

/div><br/><br/>

<center>

<input type= ' button ' name= ' login ' value= ' log in '/>

&nbsp&nbsp

<input type= ' button ' name= ' reset ' value= ' reset '/>

</center>

</form>

The third step: JS file:

$ (". Form"). ValidForm ({

Form submission

Ignorehidden:true,

Postonce:true,

Ajaxpost:true,

Tiptype:function (MSG,O,CSSCTL) {

if (!o.obj.is ("form")) {

var objtip=o.obj.siblings (". Validform_checktip ");

Cssctl (Objtip,o.type);

Objtip.text (msg);

}

},

Callback:function (data) {

callback function

Switch (data) {

Case 1:

window.location.href=$ (' #url '). Val () + '/test/test/test_manage ';

Alert (' Landing success ');

Break

Case 2:

window.location.href=$ (' #url '). Val ();

Break

Case 3:

$ (' input[name= "pwd"]). Val (');

Alert (' Password input error ');

Break

Case 4:

$ (' input[name= "Idcard"]). Val (');

$ (' input[name= "pwd"]). Val (');

Alert (' Login failed ');

Break

}

}

});