程序博客网 > java与android的区别

jquery 验证框架的一点实战总结

来源：互联网发布：java与android的区别编辑：程序博客网时间：2024/06/05 05:43

<%@ page language="java" import="java.util.*,java.io.PrintWriter" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>验证框架</title>

  <style type="text/css">
        label { width: 10em; float: left; }
        label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}
        input.haha { border: 1px solid red; }
        label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}
        input.focus { border: 2px solid green; }
        ul li{ display: block;}
    </style>
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="js/jquery.validate.js"></script>
  <script type="text/javascript">

  $(function(){
       var validator = $("#myform").validate({

        debug: false,       //调试模式取消submit的默认提交功能
        errorClass: "haha",//默认为错误的样式类为：error
        focusInvalid: false,
        onkeyup: false,
        submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form
            alert("提交表单");
            form.submit();   //提交表单
        },
        rules: {           //定义验证规则,其中属性名为表单的name属性
            username: {
                required: true,
                minlength: 2,
                remote: "uservalid.jsp" //传说当中的ajax验证
            },
            firstpwd: {
                required: true,
                //minlength: 6
                rangelength: [6,8]
            },
            secondpwd: {
                required: true,
                equalTo: "#password"
            },
            sex: {
                required: true
            },
            age: {
                required: true,
                range: [0,120]
            },
            email: {
                required: true,
                email: true
            },
            purl: {
                required: true,
                url: true
            },
            afile: {
                required: true,
                accept: "xls|doc|rar|zip"
            }
        },
        messages: {       //自定义验证消息
            username: {
                required: "用户名是必需的！",
                minlength: $.format("用户名至少要{0}个字符！"),
                remote: $.format("{0}已经被占用")
            },
            firstpwd: {
                required: "密码是必需的！",
                rangelength: $.format("密码要在{0}-{1}个字符之间！")
            },
            secondpwd: {
                required: "密码验证是必需的！",
                equalTo: "密码验证需要与密码一致"
            },
            sex: {
                required: "性别是必需的"
            },
            age: {
                required: "年龄是必需的",
                range: "年龄必须介于{0}-{120}之间"
            },
            email: {
                required: "邮箱是必需的！",
                email: "请输入正确的邮箱地址（例如 myemail@163.com）"
            },
            purl: {
                required: "个人主页是必需的",
                url: "请输入正确的url格式,如 http://www.domainname.com"
            },
            afile: {
                required: "附件是必需的！",
                accept: "只接收xls,doc,rar,zip文件"
            }
        },
        errorPlacement: function(error, element) { //验证消息放置的地方
            error.appendTo( element.parent("td").next("td") );
        },
        highlight: function(element, errorClass) { //针对验证的表单设置高亮
            $(element).addClass(errorClass);
        },
        success: function(label) {
                    label.addClass("valid").text("Ok!")
            }


    });
    $("button").click(function(){
        validator.resetForm();
    });


});

  </script>

</head>

<body>

<div id="form_con">
        <form class="cmxform" id="myform" method="post" action="">
            <table cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td>用户名</td>
                        <td><input type="text" name="username" class="required" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td><input id="password" type="password" name="firstpwd" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>验证密码</td>
                        <td><input type="password" name="secondpwd" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>年龄</td>
                        <td><input type="text" name="age" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>邮箱</td>
                        <td><input type="text" name="email" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>个人网页</td>
                        <td><input type="text" name="purl" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>电话</td>
                        <td><input type="text" name="telephone" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>附件</td>
                        <td><input type="file" name="afile"/></td>
                        <td></td>
                    </tr>
                    <tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>
                </tbody>
            </table>
        </form>
</div>
</body>
</html>

accept(extension) 返回:Boolean 验证相同后缀名的字符串

afile: {
                required: true,
                accept: "xls|doc|rar|zip" //这里不能用","分隔字符串，只能用"|"!!!
            }

java与android的区别

java与android的区别

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子帝王燕王妃有药免费阅读王妃有药帝王燕帝王燕之王妃有药帝王燕王妃有药大结局帝王燕全文阅读帝王燕王妃有药txt全文下载帝王燕王妃有药小小书屋天才小毒妃第二部帝王燕帝王相不能露给别人看帝王相翡翠原石帝王绿12亿帝王石昨日帝王篇昨日帝王篇歌词帝王紫手镯帝王魟帝王绿翡翠图片玻璃种帝王绿手镯帝王绿翡翠玻璃种帝王绿翡翠帝王绿手镯帝王绿糯冰翡翠价格玻璃种帝王绿12亿图片绿帝王冰种帝王绿帝王绿玻璃种翡翠高冰种帝王绿帝王绿翡翠镯子祖母绿和帝王绿帝王绿翡翠摆件翡翠帝王绿图片帝王绿翡翠手镯图片帝王花帝王花花语帝王花图片帝王之花大唐之千古帝王贪玩蓝月帝王娇傅亭蕉雨林蝎vs帝王蝎帝王蝎有毒吗巨人蜈蚣vs帝王蝎