表单验证Jquery实现

来源：互联网发布：yy上的网络兼职是真的吗编辑：程序博客网时间：2024/05/16 05:56

1.引入style.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;}.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}.sub { padding-left:100px;}.sub input { margin-right:10px; }.formtips{width: 200px;margin:2px;padding:2px;}.onError{    background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;padding-left:25px;}.onSuccess{    background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;padding-left:25px;}.high{    color:red;}

2.引入jquery-1.3.1.js

3.jquery和html代码如下所示：

<!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>    <link href="css/style.css" rel="stylesheet" type="text/css" />    <!--   引入jQuery -->    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        //<![CDATA[        $(function () {            //首先为必选文本框后面添加星号标记            $("input.required").each(function () {                //创建星号标识                var $required = $("<strong class='high'>*</strong>");                $(this).parent().append($required);            });            //为表单的input添加焦点失去的提示信息            $("form :input").blur(function () {                $parent = $(this).parent();                //首先清除以前的提示信息                $parent.find("span.formtips").remove();                //用户名验证                if ($(this).is("#username")) {                    if (this.value == "" || this.value.length < 6) {                        //添加错误提示                        var errorMsg = "请输入至少六位的用户名！";                        $parent.append("<span class='formtips onError'>" + errorMsg + "</span>");                    }                    else {                        //添加正确提示                        var okMsg = "输入正确";                        $parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>");                    }                }                    //邮箱验证                else if ($(this).is("#email")) {                    if (this.value == "" || (this.value != "" && !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(this.value))) {                        var errorMsg = "请输入正确的邮箱格式！";                        $parent.append("<span class='formtips onError'>" + errorMsg + "</span>");                    }                    else {                        //添加正确提示                        var okMsg = "输入正确";                        $parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>");                    }                }            }).focus(function () {                //当获得焦点时也进行验证（triggerHandler只触发元素绑定的blur事件，而trigger则会触发浏览器默认的blur事件，即不能将光标定位到文本框上）                $(this).triggerHandler("blur");            }).keyup(function () {                //当键盘按起时进行验证                $(this).triggerHandler("blur");            });            //提交按钮            $("#send").click(function () {                //首先触发blur(允许冒泡)                $("form .required:input").trigger("blur");                //如果有错误信息，那么禁止提交                var len = $("span.onError").length;                if (len > 0) {                    return false;                }                alert("注册成功");            });            //重置按钮            $("#res").click(function () {                //移除所有提示信息                $("span.formtips").remove();            });        })        //]]>    </script></head><body>    <form method="post" action="">        <div class="int">            <label for="username">用户名:</label>            <input type="text" id="username" class="required" />        </div>        <div class="int">            <label for="email">邮箱:</label>            <input type="text" id="email" class="required" />        </div>        <div class="int">            <label for="personinfo">个人资料:</label>            <input type="text" id="personinfo" />        </div>        <div class="sub">            <input type="submit" value="提交" id="send" /><input type="reset" id="res" />        </div>    </form></body></html>

4.效果图：

0 0