jquery form 表单验证

来源：互联网发布：小班防火知多少ppt 编辑：程序博客网时间：2024/05/16 04:53

做form表单验证的话最主要的:

1:直接点击提交的时候表单要自己验证

2:每次鼠标离开焦点的时候验证

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}

form div { margin:5px 0;}

.int label { float:left; width:100px; text-align:right; background-color:#0CC;}

.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}

.high{<span style="font-family: Arial, Helvetica, sans-serif;"> color:red;</span><span style="font-family: Arial, Helvetica, sans-serif;">}</span>

.sub { padding-left:100px;}

.sub input { margin-right:10px; }

</style>

<script src="jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$("form :input.required").each(function() {

            var $parent=$(this).parent();

$parent.append("<strong class='high'> *</strong>");

});

$("form :input").blur(function(){

$(this).parent().find(".formtips").remove();

if($(this).is("#name")){

if(this.value==""||this.value.length<6){

$(this).parent().append("<span class='formtips onerror'>请输入至少6位用户名</span>")

}else{

$(this).parent().append("<span class='formtips onsuccess'>输入正确</span>");

}else if($(this).is("#pwd")){

if(this.value==""||this.value.length<6){

$(this).parent().append("<span class='formtips onerror'>请输入至少6位密码</span>");

}else{

$(this).parent().append("<span class='formtips onsuccess'>输入正确</span>");

}else if($(this).is("#repwd")){

//alert($("#pwd").val());

//alert($("#repwd").val());

if($("#pwd").val()!=""&&$("#pwd").val().length>=6&&$("#repwd").val()==$("#pwd").val()){

//alert(this.value);

$(this).parent().append("<span class='formtips onsuccess'>输入正确</span>");

}else{

$(this).parent().append("<span class='formtips onerror'>输入不正确</span>");

}else if($(this).is("#mail")){

if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){

$(this).parent().append("<span class='formtips onerror'>输入的邮箱地址不正确</span>");

}else{

$(this).parent().append("<span class='formtips onsuccess'>输入正确</span>");

}).keyup(function(){

$(this).triggerHandler("blur");

}).focus(function(){

$(this).triggerHandler("blur");

})

$("#send").click(function(){

$("form :input.required").trigger("blur");//在点击发送按钮后自动启动required的blur事件

var numerror=$("form .onerror").length;//获取类onerror的长度

if(numerror){<span style="white-space:pre"></span>//如果长度部位0返回FALSE,

return false;

alert("注册成功,密码已发到你的邮箱,请查收.");

})

})

</script>

</head>

<body>

<form method="post" action="">

    <div class="int">

        <label>   用户名:</label>

            <input type="text" id="name" class="required" />

        </div>

        <div class="int">

        <label>     密码:</label>0

            <input type="password" id="pwd" class="required"/>

        </div>

        <div class="int">

        <label>确认密码:</label>

            <input type="password" id="repwd" class="required"/>

        </div>

        <div class="int">

        <label>邮箱:</label>

            <input type="text" id="mail" class="required">

        </div>

        <div class="sub">

        <input type="submit" id="send" value="提交"/>

            <input type="reset" id="res" />

        </div>

    </form>

</body>

</html>

0 0