不多说,直接上代码,先JS代码(function($) {
$.fn.validate = function(options){
var defaults = {};
var opts = $.extend(defaults, options);
$('#regForm').submit(function () {
var validate = '';
validate = new $.validate2(opts);
validate.init();
return validate.subform();
})
$('#regForm input').blur(function() {
if( opts.point_type == 'tips' ) {
var validate = '';
validate = new $.validate2(opts);
validate.init();
validate.check($(this).attr('id'));
}
})
} $.validate2 = function(opts) {
this.settings = opts;
this.rules = new Array('require', 'regexp', 'minlen', 'maxlen', 'unique', 'checked', 'to', 'selected');
this.rule = new Array();
this.message = new Array();
this.current_rule = new Array();
this.current_msg = new Array();
this.current_field = new Array();
this.jstips = this.settings.jstips;
this.field_name = new Array();
this.point_key_array= new Array();
this.point_msg_array= new Array();
this.rule_index = 0;
} $.extend($.validate2, {
prototype: {
init : function() {
var err = new Array();
var sign = 0;
for( i in this.jstips) {
this.rule[i] = this.jstips[i].rule;
this.message[i] = this.jstips[i].message;
this.field_name[i] = this.jstips[i].field_name;
$('#'+this.field_name[i]).bind('focus', this.cancel_html);
}
},
subform : function() {
var rule_array;
for( j in this.rule ) {
rule_array = this.get_rule_or_msg(String(this.rule[j]));
msg_array = this.get_rule_or_msg(String(this.message[j]));
if(!rule_array) continue;
this.get_point_info(rule_array, msg_array, this.field_name[j]);
}
return this.point_msg();
},
cancel_html : function() {
$('#'+$(this).attr('id')+'_tips').html('');
},
check : function() {
for( j in this.field_name ) {
if(this.field_name[j] == arguments[0]) {
rule_array = this.get_rule_or_msg(String(this.rule[j]));
msg_array = this.get_rule_or_msg(String(this.message[j]));
this.get_point_info(rule_array, msg_array, this.field_name[j]);
break;
}
}
return this.point_msg();
},
get_rule_or_msg : function(string) {
return string == '' ? false : string.split('|');
},
get_point_info : function(rule_array, msg_array, field_name) {
this.current_rule = rule_array;
this.current_msg = msg_array;
this.current_field = field_name;
return this.trans_func();
},
trans_func : function() {
this.rule_index = 0;
for( j in this.current_rule ) {
for( i in this.rules ) {
if(this.trim(this.current_rule[j]).indexOf(this.rules[i]) >= 0) {
this.__request(this.rules[i]);
}
}
this.rule_index_add();
}
},
__request : function() {
eval('this.'+arguments[0]+'()');
},
set_point_msg : function(){
i = this.point_key_array.length > 0 ? this.point_key_array.length : 0;
this.point_key_array[i] = $('#'+this.current_field+'_tips');
this.point_msg_array[i] = this.current_msg[this.get_rule_index()];
return;
},
point_msg : function() {
var issubmit = this.settings.point_type == 'tips' ? this.tips_point_msg() : this.alert_point_msg();
return issubmit;
},
tips_point_msg : function() {
var issubmit = true;
for( i in this.point_key_array ) {
this.point_key_array[i].html('');
issubmit = false;
this.point_key_array[i].html(this.point_msg_array[i]);
}
return issubmit;
},
alert_point_msg : function() {
var issubmit = true;
var message = '';
for( i in this.point_key_array ) {
issubmit = false;
message = message + this.trim(this.point_msg_array[i])+'\r\n';
}
if(message != '') alert(message);
return issubmit;
},
rule_index_add : function() {
this.rule_index = this.rule_index + 1;
return;
},
get_rule_index : function() {
return this.rule_index;
},
require : function() {
value = $('#'+this.current_field).val();
if(value == '') this.set_point_msg();
},
regexp : function() {
patt = this.current_rule[this.get_rule_index()].split('&&');
patt[1] = this.trim(patt[1]);
temppatt = new RegExp(patt[1]);
value = $('#'+this.current_field).val();
if ( !temppatt.test(value) && value != ''){this.set_point_msg();}
return;
},
minlen : function() {
patt = this.current_rule[this.get_rule_index()].split('&&');
value = $('#'+this.current_field).val();
if( value.length < patt[1] ) this.set_point_msg();
return;
},
maxlen : function() {
patt = this.current_rule[this.get_rule_index()].split('&&');
value = $('#'+this.current_field).val();
if( value.length > patt[1] ) this.set_point_msg();
},
unique : function() {
var returnvalue = '';
patt = this.current_rule[this.get_rule_index()].split('&&');
value = $('#'+this.current_field).val();
patt[1] = this.trim(patt[1])+'&'+this.current_field+'='+value;
if(value != ''){
msg = this.ajax(patt[1]);
eval('msg='+ msg +';');
if(!msg.bool_msg){this.set_point_msg();}
}
},
ajax : function(url) {
var xmlhttp;
if(window.XMLHttpRequest) {
//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject) {
//针对IE6,5.5,5
//两个可以创建XMLHttpRequest对象的空间名称，保存在一个JS数组中
//排在前面的版本较新
var activeName = ['MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var i=0;i<activeName.length;i++) {
try {
//取出一个空间名进行创建，如果创建成功就终止循环
//如果创建失败，会抛出异常，然后可以继续循环，继续尝试创建
xmlhttp = new ActiveXObject(activeName[i]);
}
catch(e) {}
}
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
return xmlhttp.responseText;
}, checked : function() {
if( !$('#'+this.current_field).attr('checked')) {this.set_point_msg();}
return;
},
to : function() {
patt = this.current_rule[this.get_rule_index()].split('&&');
value1 = $('#'+this.current_field).val();
value2 = $('#'+patt[1]).val();
if(value1 != value2) this.set_point_msg();
return;
},
trim : function(sString){
return sString.replace(/(^\s*)|(\s*$)/g, "");
}
}
})
})(jQuery)
$.fn.validate = function(options){
var defaults = {};
var opts = $.extend(defaults, options);
$('#regForm').submit(function () {
var validate = '';
validate = new $.validate2(opts);
validate.init();
return validate.subform();
})
$('#regForm input').blur(function() {
if( opts.point_type == 'tips' ) {
var validate = '';
validate = new $.validate2(opts);
validate.init();
validate.check($(this).attr('id'));
}
})
} $.validate2 = function(opts) {
this.settings = opts;
this.rules = new Array('require', 'regexp', 'minlen', 'maxlen', 'unique', 'checked', 'to', 'selected');
this.rule = new Array();
this.message = new Array();
this.current_rule = new Array();
this.current_msg = new Array();
this.current_field = new Array();
this.jstips = this.settings.jstips;
this.field_name = new Array();
this.point_key_array= new Array();
this.point_msg_array= new Array();
this.rule_index = 0;
} $.extend($.validate2, {
prototype: {
init : function() {
var err = new Array();
var sign = 0;
for( i in this.jstips) {
this.rule[i] = this.jstips[i].rule;
this.message[i] = this.jstips[i].message;
this.field_name[i] = this.jstips[i].field_name;
$('#'+this.field_name[i]).bind('focus', this.cancel_html);
}
},
subform : function() {
var rule_array;
for( j in this.rule ) {
rule_array = this.get_rule_or_msg(String(this.rule[j]));
msg_array = this.get_rule_or_msg(String(this.message[j]));
if(!rule_array) continue;
this.get_point_info(rule_array, msg_array, this.field_name[j]);
}
return this.point_msg();
},
cancel_html : function() {
$('#'+$(this).attr('id')+'_tips').html('');
},
check : function() {
for( j in this.field_name ) {
if(this.field_name[j] == arguments[0]) {
rule_array = this.get_rule_or_msg(String(this.rule[j]));
msg_array = this.get_rule_or_msg(String(this.message[j]));
this.get_point_info(rule_array, msg_array, this.field_name[j]);
break;
}
}
return this.point_msg();
},
get_rule_or_msg : function(string) {
return string == '' ? false : string.split('|');
},
get_point_info : function(rule_array, msg_array, field_name) {
this.current_rule = rule_array;
this.current_msg = msg_array;
this.current_field = field_name;
return this.trans_func();
},
trans_func : function() {
this.rule_index = 0;
for( j in this.current_rule ) {
for( i in this.rules ) {
if(this.trim(this.current_rule[j]).indexOf(this.rules[i]) >= 0) {
this.__request(this.rules[i]);
}
}
this.rule_index_add();
}
},
__request : function() {
eval('this.'+arguments[0]+'()');
},
set_point_msg : function(){
i = this.point_key_array.length > 0 ? this.point_key_array.length : 0;
this.point_key_array[i] = $('#'+this.current_field+'_tips');
this.point_msg_array[i] = this.current_msg[this.get_rule_index()];
return;
},
point_msg : function() {
var issubmit = this.settings.point_type == 'tips' ? this.tips_point_msg() : this.alert_point_msg();
return issubmit;
},
tips_point_msg : function() {
var issubmit = true;
for( i in this.point_key_array ) {
this.point_key_array[i].html('');
issubmit = false;
this.point_key_array[i].html(this.point_msg_array[i]);
}
return issubmit;
},
alert_point_msg : function() {
var issubmit = true;
var message = '';
for( i in this.point_key_array ) {
issubmit = false;
message = message + this.trim(this.point_msg_array[i])+'\r\n';
}
if(message != '') alert(message);
return issubmit;
},
rule_index_add : function() {
this.rule_index = this.rule_index + 1;
return;
},
get_rule_index : function() {
return this.rule_index;
},
require : function() {
value = $('#'+this.current_field).val();
if(value == '') this.set_point_msg();
},
regexp : function() {
patt = this.current_rule[this.get_rule_index()].split('&&');
patt[1] = this.trim(patt[1]);
temppatt = new RegExp(patt[1]);
value = $('#'+this.current_field).val();
if ( !temppatt.test(value) && value != ''){this.set_point_msg();}
return;
},
minlen : function() {
patt = this.current_rule[this.get_rule_index()].split('&&');
value = $('#'+this.current_field).val();
if( value.length < patt[1] ) this.set_point_msg();
return;
},
maxlen : function() {
patt = this.current_rule[this.get_rule_index()].split('&&');
value = $('#'+this.current_field).val();
if( value.length > patt[1] ) this.set_point_msg();
},
unique : function() {
var returnvalue = '';
patt = this.current_rule[this.get_rule_index()].split('&&');
value = $('#'+this.current_field).val();
patt[1] = this.trim(patt[1])+'&'+this.current_field+'='+value;
if(value != ''){
msg = this.ajax(patt[1]);
eval('msg='+ msg +';');
if(!msg.bool_msg){this.set_point_msg();}
}
},
ajax : function(url) {
var xmlhttp;
if(window.XMLHttpRequest) {
//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject) {
//针对IE6,5.5,5
//两个可以创建XMLHttpRequest对象的空间名称，保存在一个JS数组中
//排在前面的版本较新
var activeName = ['MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var i=0;i<activeName.length;i++) {
try {
//取出一个空间名进行创建，如果创建成功就终止循环
//如果创建失败，会抛出异常，然后可以继续循环，继续尝试创建
xmlhttp = new ActiveXObject(activeName[i]);
}
catch(e) {}
}
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
return xmlhttp.responseText;
}, checked : function() {
if( !$('#'+this.current_field).attr('checked')) {this.set_point_msg();}
return;
},
to : function() {
patt = this.current_rule[this.get_rule_index()].split('&&');
value1 = $('#'+this.current_field).val();
value2 = $('#'+patt[1]).val();
if(value1 != value2) this.set_point_msg();
return;
},
trim : function(sString){
return sString.replace(/(^\s*)|(\s*$)/g, "");
}
}
})
})(jQuery)
<script>
$(document).ready(function() {
var jstips=eval(<?=json_encode($jstips)?>);
$("#regForm").validate({
point_type: 'alert', //alert or tips
jstips: jstips,
subform:'regForm'
});
})以下是表单,包含,名称,密码,邮箱,以及国家等等<FORM METHOD="POST" name="regForm" id="regForm">
<table cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="30" valign="center">Name: </td>
<td height="25" valign="center">
<input id="first_name" size="5" name="first_name" class="required"/>
<input id="last_name" size="14" name="last_name" class="required"/>
<br /><span id='first_name_tips'></span>
<br /><span id='last_name_tips'></span>
</td>
</tr>
<tr valign="top">
<td height="30" valign="center">Gender: </td>
<td valign="center"><input id="gender" value="M" checked="checked" type="radio" name="gender" />
<label for="gender[0]">Male</label>
<input id="gender" value="F" type="radio" name="gender" />
<label for="gender[1]">Female</label>
<br /><span id='gender_tips'></span>
</td>
</tr>
<tr valign="top">
<td height="30" valign="center">Password: </td>
<td valign="center">
<input id="passwd1" value="" maxlength="12" size="24" type="password" name="passwd1" class="login_width" />
<br /><span id='passwd1_tips'></span>
</td>
</tr>
<tr valign="top">
<td height="30" valign="center">Confirm Password: </td>
<td valign="center">
<input id="passwd2" value="" maxlength="12" size="24" type="password" name="passwd2" class="login_width" />
<br /><span id='passwd2_tips'></span>
</td>
</tr>
<tr valign="top">
<td height="30" valign="center">Email: </td>
<td valign="center">
<input id="email" size="22" name="email" class="login_width"/>
<br /><span id='email_tips'></span>
</td>
</tr>
<tr valign="top">
<td height="30" valign="center">Relationship Status: </td>
<td valign="center">
<select name="marry" id="marry" style="height:20px;">
<option value="" selected>-- Please Select --</option>
<option value="1">Never Married</option>
<option value="2">Divorced</option>
<option value="3">Widowed</option>
<option value="4">Separated</option>
<option value="5">Married</option>
</select>
<br /><span id='marry_tips'></span>
</td>
</tr>
<tr valign="top">
<td height="30" valign="center">Ideal Match Age: </td>
<td valign="center">
<select name="age1" id="age1" style="width:auto">
<option value="18" selected>18</option><option value="19" >19</option><option value="20" >20</option><option value="21" >21</option><option value="22" >22</option><option value="23" >23</option><option value="24" >24</option><option value="25" >25</option><option value="26" >26</option><option value="27" >27</option><option value="28" >28</option><option value="29" >29</option><option value="30" >30</option><option value="31" >31</option><option value="32" >32</option><option value="33" >33</option><option value="34" >34</option><option value="35" >35</option><option value="36" >36</option><option value="37" >37</option><option value="38" >38</option><option value="39" >39</option><option value="40" >40</option><option value="41" >41</option><option value="42" >42</option><option value="43" >43</option><option value="44" >44</option><option value="45" >45</option><option value="46" >46</option><option value="47" >47</option><option value="48" >48</option><option value="49" >49</option><option value="50" >50</option><option value="51" >51</option><option value="52" >52</option><option value="53" >53</option><option value="54" >54</option><option value="55" >55</option><option value="56" >56</option><option value="57" >57</option><option value="58" >58</option><option value="59" >59</option><option value="60" >60</option><option value="61" >61</option><option value="62" >62</option><option value="63" >63</option><option value="64" >64</option><option value="65" >65</option><option value="66" >66</option><option value="67" >67</option><option value="68" >68</option><option value="69" >69</option><option value="70" >70</option><option value="71" >71</option><option value="72" >72</option><option value="73" >73</option><option value="74" >74</option><option value="75" >75</option><option value="76" >76</option><option value="77" >77</option><option value="78" >78</option><option value="79" >79</option><option value="80" >80</option><option value="81" >81</option><option value="82" >82</option><option value="83" >83</option><option value="84" >84</option><option value="85" >85</option><option value="86" >86</option><option value="87" >87</option><option value="88" >88</option><option value="89" >89</option><option value="90" >90</option><option value="91" >91</option><option value="92" >92</option><option value="93" >93</option><option value="94" >94</option><option value="95" >95</option><option value="96" >96</option><option value="97" >97</option><option value="98" >98</option><option value="99" >99</option> </select>
and
<select name="age2" id="age2" style="width:auto">
<option value="18" >18</option><option value="19" >19</option><option value="20" >20</option><option value="21" >21</option><option value="22" >22</option><option value="23" >23</option><option value="24" >24</option><option value="25" >25</option><option value="26" >26</option><option value="27" >27</option><option value="28" >28</option><option value="29" >29</option><option value="30" >30</option><option value="31" >31</option><option value="32" >32</option><option value="33" >33</option><option value="34" >34</option><option value="35" >35</option><option value="36" >36</option><option value="37" >37</option><option value="38" >38</option><option value="39" >39</option><option value="40" >40</option><option value="41" >41</option><option value="42" >42</option><option value="43" >43</option><option value="44" >44</option><option value="45" >45</option><option value="46" >46</option><option value="47" >47</option><option value="48" >48</option><option value="49" >49</option><option value="50" >50</option><option value="51" >51</option><option value="52" >52</option><option value="53" >53</option><option value="54" >54</option><option value="55" >55</option><option value="56" >56</option><option value="57" >57</option><option value="58" >58</option><option value="59" >59</option><option value="60" >60</option><option value="61" >61</option><option value="62" >62</option><option value="63" >63</option><option value="64" >64</option><option value="65" >65</option><option value="66" >66</option><option value="67" >67</option><option value="68" >68</option><option value="69" >69</option><option value="70" >70</option><option value="71" >71</option><option value="72" >72</option><option value="73" >73</option><option value="74" >74</option><option value="75" >75</option><option value="76" >76</option><option value="77" >77</option><option value="78" >78</option><option value="79" >79</option><option value="80" >80</option><option value="81" >81</option><option value="82" >82</option><option value="83" >83</option><option value="84" >84</option><option value="85" >85</option><option value="86" >86</option><option value="87" >87</option><option value="88" >88</option><option value="89" >89</option><option value="90" >90</option><option value="91" >91</option><option value="92" >92</option><option value="93" >93</option><option value="94" >94</option><option value="95" >95</option><option value="96" >96</option><option value="97" >97</option><option value="98" >98</option><option value="99" selected>99</option> </select>
y/o
</td>
</tr>
<tr valign="top">
<td height="50" colspan="2" align="center" valign="bottom">
<input name="Submit" type="submit" class="button_join_free_now" value=" " />
</td>
</tr>
</table>
</form>
第三部分就是验证的规则,这些规则是被我写在一个PHP文件中,前台包含该文件即可$jstips = array();$jstips[] = array('rule' => array('
require|regexp&&^[a-zA-Z0-9]+$
'),
'message' => array('
Your first name is mandatory.|
Your first name can contain letters and/or numbers only
'),
'field_name' => 'first_name'
);
$jstips[] = array('rule' => array('
require|regexp&&^[a-zA-Z0-9]+$
'),
'message' => array('
Your last name is mandatory.|
Your last name can contain letters and/or numbers only
'),
'field_name' => 'last_name'
);
$jstips[] = array('rule' => array('
require
'),
'message' => array('
Your gender is mandatory.
'),
'field_name' => 'gender'
);
$jstips[] = array('rule' => array('
require|minlen&&4|maxlen&&20|regexp&&^[a-zA-Z0-9]+$
'),
'message' => array('
Your password is mandatory.|
Your password should be between 4 to 12 characters.|
Your password should be between 4 to 12 characters.|
Your password cannot contain spaces or special characters.
'),
'field_name' => 'passwd1'
);
$jstips[] = array('rule' => array('
require|to&&passwd1
'),
'message' => array('
Please type your password again.|
Both the passwords you typed do not match.
'),
'field_name' => 'passwd2'
);
$jstips[] = array('rule' => array('
require|regexp&&[a-zA-Z0-9_]*@[a-zA-Z0-9_]*\.[a-zA-Z0-9_]*|unique&&/join/ajax.php?RegAction=01
'),
'message' => array('
Your emai is mandatory.|
Incorrect email address format. Please type a valid email address.|
This email address is already registered with us.
'),
'field_name' => 'email'
);
$jstips[] = array('rule' => array('
require
'),
'message' => array('
Your relationship satus is mandatory.
'),
'field_name' => 'marry'
);
$jstips[] = array('rule' => array('
require
'),
'message' => array('
Date of birth is mandatory.
'),
'field_name' => 'birthday_y'
);
$jstips[] = array('rule' => array('
require
'),
'message' => array('
Date of birth is mandatory.
'),
'field_name' => 'birthday_m'
);
$jstips[] = array('rule' => array('
require
'),
'message' => array('
Date of birth is mandatory.
'),
'field_name' => 'birthday_d'
);
$jstips[] = array('rule' => array('
require
'),
'message' => array('
Your residence country is mandatory.
'),
'field_name' => 'country'
);