下面的几项表单验证，是练习demo,发表只为留个纪念~
<!doctype html>
<html>
<head>
<title>表单验证</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<script type="text/javascript" charset="utf-8" src="jquery-1.6.1.js"></script>
<style type="text/css" >
form {
width:500px;
margin:50px auto;
}
span {
display:inline-block;color:red;
}
p:nth-last-child(1){
color:red;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$.fn.validate = function(){
var validator = $(this);
var count = 0;
var mes_show = function($this, message){
var selector = $this.attr('validate_type') + '_span';
if (message == 'success' || message == '')
{ if ($('.' + selector).length == 0)
{
$this.after('<span class="' + selector + '"></span>');
}else{
$('.' + selector).replaceWith('<span class="' + selector + '"></span>');
};
}else{
if ($('.' + selector).length == 0)
{
$this.after('<span class="' + selector + '">' + message + '</span>');
}else{
$('.' + selector).replaceWith('<span class="' + selector + '">' + message + '</span>');
};
};
};
var checkfunction= function(string,reg){
return reg.test(string);
};
var email_validate = function($this){
var flag = checkfunction($this.val(), /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/);
if (!flag)
{
return '邮箱格式不正确';
}else{
return 'success';
};
};
var identity_validate = function($this){
var flag = checkfunction($this.val(), /^\d{18}$/);
if (!flag)
{
return '身份证号应为18位'
}else{
return 'success';
};
};
var phone_validate = function($this){
var flag = checkfunction($this.val(), /^1\d{10}$/);
if (!flag)
{
return '手机号码不正确';
}else{
return 'success';
};
};
var name_validate = function($this){
var min = $this.attr('min_size');
var max = $this.attr('max_size');
if ((min !== undefined)&&(max !== undefined))
{
flag = checkfunction($this.val(), /^\S+$/);
if (flag && ($this.val().length >= min) && ($this.val().length <= max))
{
return 'success';
}else{
return '输入名称应为' + min +'到' + max + '位';
};
}else{
if (min !== undefined)
{
flag = checkfunction($this.val(), /^\S+$/);
if (flag && $this.val().length >= min)
{
return 'success';
}else{
return '输入名称不能少于' + min + '位';
};
}else{
if (max !== undefined)
{
flag = checkfunction($this.val(), /^\S+$/);
if (flag && $this.val().length <= max)
{
return 'success';
}else{
return '输入名称不能超过' + max + '位';
};
}else{
return '名称不能为空';
}
}
};
};
var password_validate = function($this){
var min = $this.attr('min_size');
var max = $this.attr('max_size');
if ((min !== undefined)&&(max !== undefined))
{
flag = checkfunction($this.val(), /^[a-zA-Z0-9]+$/);
if (flag && ($this.val().length >= min) && ($this.val().length <= max))
{
return 'success';
}else{
return '密码长度应为' + min +'到' + max + '位';
};
}else{
if (min !== undefined)
{
flag = checkfunction($this.val(), /^[a-zA-Z0-9]+$/);
if (flag && $this.val().length >= min)
{
return 'success';
}else{
return '密码长度不能少于' + min + '位';
};
}else{
if (max !== undefined)
{
flag = checkfunction($this.val(), /^[a-zA-Z0-9]+$/);
if (flag && $this.val().length <= max)
{
return 'success';
}else{
return '密码长度不能超过' + max + '位';
};
}else{
flag = checkfunction($this.val(), /^[a-zA-Z0-9]+$/);
if (flag)
{
return 'success'
}else{
return '密码不能为空';
};
};
};
};
};
var password_value = function(){
var input_password = validator.find('input[type="password"]');
var value_0 = input_password[0].value;
var value_1 = input_password[1].value;
if (value_0 == value_1)
{
return '';
}else{
return '两次输入密码不一致';
};
};
var input_validate = function($this){
switch ($this.attr('validate_type'))
{
case 'email' :
mes_show($this, email_validate($this));
if (email_validate($this) == 'success')
{
count++;
};
break;
case 'identity' :
mes_show($this, identity_validate($this));
if (identity_validate($this) == 'success')
{
count++;
};
break;
case 'phone' :
mes_show($this, phone_validate($this));
if (phone_validate($this) == 'success')
{
count++;
};
break;
case 'name' :
mes_show($this, name_validate($this));
if (name_validate($this) == 'success')
{
count++;
};
break;
case 'password' :
mes_show($this, password_validate($this));
if (password_validate($this) == 'success')
{
count++;
};
break;
case 're_password' :
mes_show($this, password_value($this));
if (password_value($this) == '')
{
count++;
};
break;
};
};
validator.find('input[validate_type]').each(function(){
$(this).bind('blur', function(){
input_validate($(this));
});
});
validator.bind('submit', function(){
count = 0;
$(this).find('input[validate_type]').each(function(){
input_validate($(this));
});
if ( count == $(this).find('input[validate_type]').length)
{
return ture;
}else{
return false;
};
});
};
$('form').validate();
});
</script>
<form>
<p>邮箱:<input type="text" validate_type="email"/></p>
<p>身份证:<input type="text" validate_type="identity"></p>
<p>电话:<input type="text" validate_type="phone"/></p>
<p>姓名:<input type="text" validate_type="name" min_size="4"/></p>
<p>密码:<input type="password" validate_type="password" min_size="6"/></p>
<p>确认密码:<input type="password" validate_type="re_password"/></p>
<input type="submit" value="submit"/>
<input type="reset" value="reset"/>
</form>
</body>
</html>
插件说明：
需要Jquery
js api 为 validate() ，例： $('form').validate();
1.表单中每个需要验证的input标签中要加入validate_type属性，属性值对应如下：
'email' 邮件，'identity' 身份证 ，'phone' 手机号码，'name' 名称 ， 'password' 密码， 're_password' 确认密码；
2.其中validate_type 为name 和 password 可以加上 最小长度 min_size 最大长度 max_size 的限制属性，例：
<p>密码:<input type="password" validate_type="password" min_size="6"/></p>
3084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
