Html语句验证用户信息

样式代码：

<style type="text/css">
body,div,ul,li,h2,dl,dt,dd,input{margin:0; padding:0;}
body{ font-size:12px;}
h2{text-align:center; color:#F00; margin:10px;}
dl{width:800px; border:1px solid #0C6; margin:0 auto; background-color:#F8FFF0; overflow:hidden; padding:20px 0;}
dl dt,dd{width:300px; height:25px; float:left; text-align:right; line-height:25px; margin:5px 0;}
.error,.success{background-image:url(images/error.png); background-repeat:no-repeat;padding:4px;padding-left:18px; color:#F00;}
.strongdt,.strongdd{margin:0; padding:0; height:20px; line-height:20px;}
.strong{height:20px; background-image:url(images/strong.jpg); width:220px;}
.strong1{background-position:0 -20px;}
.strong2{background-position:0 -40px;}
.strong3{background-position:0 -60px;}
.strong4{background-position:0 -80px;}
.success{background-image:url(images/right.png); color:#0C0;}
dl dd{width:500px; text-align:left;}
.inputtxt{border:1px solid #CEFF9D; padding:2px; height:15px; width:175px;}
.submit{width:800px; text-align:center; margin-bottom:10px;}
</style>

-----------------------------

body里面代码：

<h2>用户注册信息</h2>
<form id="form1" name="form1" action="/DemoHtml.html">
<dl>
<dt>用户名：</dt>
<dd><input type="text" name="username" id="username" class="inputtxt" /></dd>
<dt>密　码：</dt>
<dd><input type="password" name="pwd" id="pwd" class="inputtxt" /></dd>
<dt class="strongdt">密码强度：</dt>
<dd class="strongdd"><div class="strong"></div></dd>
<dt>确认密码：</dt>
<dd><input type="password" name="repwd" id="repwd" class="inputtxt" /></dd>
<dt>电子邮箱：</dt>
<dd><input type="text" name="email" id="email" class="inputtxt" /></dd>
<dt>移动电话：</dt>
<dd><input type="text" name="tel" id="tel" class="inputtxt" /></dd>
<dt>身份号码：</dt>
<dd><input type="text" name="idcard" id="idcard" class="inputtxt" /></dd>
<dt>银行卡号：</dt>
<dd><input type="text" name="bankcard" id="bankcard" class="inputtxt" /></dd>
<dt>性　别：</dt>
<dd>
<input type="radio" name="sex" id="radio" value="男" />
男
<input type="radio" name="sex" id="radio2" value="女" />
女
</dd>
<dt>购物网：</dt>
<dd>
<input type="checkbox" name="buy" id="buy" />
淘宝
<input type="checkbox" name="buy" id="Checkbox1" />
京东
<input type="checkbox" name="buy" id="Checkbox2" />
天猫
</dd>
<dt>省　份：</dt>
<dd>
<label for="select"></label>
<select name="select" id="select">
<option>----请选择省份----</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
</select>
</dd>
<dt><input type="submit" value="提交"/></dt>
<dd>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置"/></dd>
</dl>
</form>

------------------------------------

验证代码：

<script type="text/javascript">
$(document).ready(function (e) {
$(":input").blur(function (e) {
$parent = $(this).parent();
$success = "输入正确";
$parent.find("span").remove();
if ($(this).is("#username")) {
if ($(this).val() == "") {
$parent.append("<span class=‘error‘>用户名不能为空</span>");
return;
}
if (!(/^[a-zA-Z0-9_-]{6,18}$/).test($(this).val())) {
$parent.append("<span class=‘error‘>只能输入6-18位的数字或者字母</span>");
return;
}
else {
$parent.append("<span class=‘success‘>恭喜从用户可以注册!</span>");
return;
}
}
/*----------------------用户名验证---------------------------*/
if ($(this).is("#pwd")) {
if ($(this).val() == "") {
$parent.append("<span class=‘error‘>密码不能为空</span>");
return;
}
if (!(/^[a-zA-Z0-9_-]{6,18}$/).test($(this).val())) {
$parent.append("<span class=‘error‘>密码只能输入6-18位的数字或者字母</span>");
return;
}
if ($("#username").val() == $(this).val()) {
$parent.append("<span class=‘error‘>为了安全，请不要用户名和密码一样！</span>");
}
else {
$parent.append("<span class=‘success‘>恭喜此密码可以用!</span>");
if ((/^[A-Z]{6,18}|[a-z]{6,18}|[0-9]{6,18}$/).test($(this).val()))
$(‘.strong‘).removeClass().addClass("strong strong1");
if ((/^([a-z].*[A-Z])|([A-Z].*[a-z])/).test($(this).val()))
$(‘.strong‘).removeClass().addClass("strong strong2");
if ((/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]/).test($(this).val()))
$(‘.strong‘).removeClass().addClass("strong strong3");
if ((/^[A-Za-z0-9]+[_][A-Za-z0-9]*$/).test($(this).val()))
$(‘.strong‘).removeClass().addClass("strong strong4");
return;
}
}
/*----------------------密码验证---------------------------*/
if ($(this).is("#repwd")) {
if ($(this).val() == "") {
$parent.append("<span class=‘error‘>密码不能为空</span>");
return;
}
if ($("#pwd").val() != $(this).val()) {
$parent.append("<span class=‘error‘>对不起，您两次密码不一致！</span>");
return;
}
else {
$parent.append("<span class=‘success‘>验证正确！</span>");
return;
}
}
/*----------------------重复密码验证--------------------*/
if ($(this).is("#email")) {
if (!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/).test($(this).val())) {

$parent.append("<span class=‘error‘>对不起，您的邮箱格式不正确！</span>");
return;
}
}
/*----------------------邮箱验证--------------------*/
if ($(this).is("#tel")) {
if (!(/^((13[0-9])|(15[^4,\D])|(18[0,5-9]))\d{8}$/).test($(this).val())) {
$parent.append("<span class=‘error‘>对不起，您的手机号码格式不正确！</span>");
return;
}
}
/*-----------------手机号码-------------------*/
if ($(this).is("#idcard")) {
if (!(/^\d{15}|\d{18}$/).test($(this).val())) {
$parent.append("<span class=‘error‘>对不起，您的身份证号码格式不正确！</span>");
return;
}
}
/*-----------------银行号码-------------------*/
if ($(this).is("#bankcard")) {
if (!(/^\d{19}$/).test($(this).val())) {
$parent.append("<span class=‘error‘>对不起，银行卡号应该是19位！</span>");
return;
}
}
});
});
</script>