JAVAEE中表单jQuery的检验方法,简单快捷...

最新推荐文章于 2020-04-04 11:46:10 发布

Sharker_

最新推荐文章于 2020-04-04 11:46:10 发布

阅读量1k

点赞数

分类专栏： javascrpit

本文链接：https://blog.csdn.net/elsery/article/details/45652987

版权

javascrpit 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在校验前需要引入JS文件,下载地址是:这里写链接内容
最新的版本的 jQuery validation 1.13.1
里面有一些demo可以看看,此JS要配置jQuery核心类库一直运行.

在jsp页面中引入相对的css样式和js脚本
代码为:

<link rel="stylesheet" href="./css/screen.css">
        <script src="../js/jquery-1.8.3.js"></script>
        <script src="../js/jquery.validate.js"></script>

表单源码(jsp):

<%--
在加载此页面就会执行load()方法,我们要对表单进行格式检验.
--%>
<body onload="load()">
    <form method="post" action="test.html" name="fromName" id="fromId">
        <table border=1>
            <tr>
                <td>真实姓名(不能为空 ,没有其他要求)</td>
                <td><input type="text" id="realname" name="realname" /></td>
            </tr>
            <tr>
                <td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>
                <td><input type="text" id="username" name="username" /></td>
            </tr>
            <tr>
                <td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
                <td><input type="password" id="psw" name="psw"
                    style="width:120px" /></td>
            </tr>
            <tr>
                <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
                <td><input type="password" id="psw2" name="psw2"
                    style="width:120px" /></td>
            </tr>
            <tr>
                <td> <input type="submit" name="firstname" id="firstname" value="保存"></td>
            </tr>

        </table>
    </form>
</body>

看JS源码:

<script type="text/javascript">
function load(){

    $("#fromId").validate({
        rules:{
            realname:"required",
            username:{
                required:true,
                maxlength:5,
                minlength:3
            },
            psw:{
                maxlength:6,
                minlength:3,
                required:true
            },
            psw2:{
                maxlength:6,
                minlength:3,
                required:true,
                equalTo:"#psw"
                }
            },
            messages: {
                realname: "不能为空!",
                username:{
                    required:"不能为空!",
                    maxlength:"长度最大为5",
                    minlength:"长度最小为3"
                },
                psw:{
                    required:"不能为空!",
                    maxlength:"长度最大为6",
                    minlength:"长度最小为3"
                },
                psw2:{
                    required:"不能为空!",
                    maxlength:"长度最大为6",
                    minlength:"长度最小为3",
                    equalTo:"两次密码不一样"
                }
            }
        });
};

</script>

我们还可以进行自定义方法校验这里不多讲解.
这是常见的校验方式
基本用法就是

调用jquery.validate({});方法进行验证
$("#empForm").validate({
      *     //自定义验证规则rules:{....}
      *     //自定义提示信息massages{....}
})

这里细节很多希望大家注意

Sharker_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JAVAEE中表单jQuery的检验方法,简单快捷...

在校验前需要引入JS文件,下载地址是:这里写链接内容最新的版本的 jQuery validation 1.13.1 里面有一些demo可以看看,此JS要配置jQuery核心类库一直运行.在jsp页面中引入相对的css样式和js脚本代码为:<link rel="stylesheet" href="./css/screen.css"> <script src="../js
复制链接

扫一扫

专栏目录