jQuery基础验证

最新推荐文章于 2022-06-14 21:43:06 发布

{[("青椒盖饭")]}

最新推荐文章于 2022-06-14 21:43:06 发布

阅读量128

点赞数

分类专栏： javaweb学习笔记

本文链接：https://blog.csdn.net/qq_43386754/article/details/86512343

版权

javaweb学习笔记专栏收录该内容

77 篇文章 0 订阅

订阅专栏

jQuery的验证框架属于一个第三方扩展插件,需要的时候直接下载所需要的程序包即可,但是这个验证只是前端的一个抽象

基本验证处理

对于验证框架而言,是需要进行一些的配置后得来的操作

需要在项目之中配置好jQuery,js文件
如果需要进行验证处理需要有样式css文件
将jQuery.validate.min.js,和additional-methods.min.js和,jQuery.metadata.js三个文件拷贝到js目录中.
建立页面,将所需要的js文件进行引用.

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate-1.13.1.js"></script>
    <script type="text/javascript" src="js/additional-methods.js"></script>
    <script type="text/javascript" src="js/jquery.metadata.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>

首先进行的是一个基础验证操作,既然是基础验证操作,只写一个表单.


<html>
<head>
    <meta charset="UTF-8"/>
    <title>jQuery验证框架</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate-1.13.1.js"></script>
    <script type="text/javascript" src="js/additional-methods.js"></script>
    <script type="text/javascript" src="js/jquery.metadata.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <form action="welcome.html">
        <table border="1">
            <tr>
                <td>用户名</td>
                <td><input type="text" name="member.mid"></td>
                <td><span id="member.midMSg"></span></td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="submit" value="注册">
                    <input type="reset" value="重置">
                </td>

            </tr>
        </table>
    </form>
</body>
</html>

按照开发原则来讲,一定要有一个与之匹配的js文件,建立一个member_add_x.js

//在页面加载的时候进行事件绑定处理
$(function(){
    $("#myform").validate({
        //此处编写验证规则
    })

});

完善validate函数

//在页面加载的时候进行事件绑定处理
$(function(){
    $("#myform").validate({
        //此处编写验证规则
        rules:{//定义所有需要使用的验证规则文件
            //member.mid为表单组件的id
            "member.mid":{
                //required的值设置为true表示此组件必须填写
                required:true
            }
        }
    })

});

页面效果

在这里插入图片描述

此时发现数据已经成功的进行了验证,当然如果有需要也可以进一步提升验证

//在页面加载的时候进行事件绑定处理
$(function(){
    $("#myform").validate({
        //此处编写验证规则
        rules:{//定义所有需要使用的验证规则文件
            //member.mid为表单组件的id
            "member.mid":{
                //required的值设置为true表示此组件必须填写
                required:true,
                //指定用户输入的内容长度
                rangelength:[5,15]
            }
        }
    })

});