javaWeb学习第五天------jQuery应用和Validate实现表单验证

最新推荐文章于 2022-05-22 21:39:00 发布

weixin_39383702

最新推荐文章于 2022-05-22 21:39:00 发布

阅读量310

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/weixin_39383702/article/details/103465240

版权

javaWeb 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

今天的学习内容：

文章目录

使用jquery中获取标签属性
jQuery的遍历迭代
jQuery中的追加方法：
jquery 中的事件
jquery 中操作css
Validate重写表单的验证

使用jquery中获取标签属性

prop（）获取标签中的属性

用法：

<body>
请输入文本：<input type="text" id="tv_text" value="123">
<script>
    $("input").prop("value");//获取属性value值
    $("input").prop("value","13");//获取value属性，并设置其值
    $("input").removeProp("value");//移除指定属性
   alert($("input").prop("value"));
</script>
</body>

     <script src="js/jquery-1.8.3.js"></script>
     <style>

         .getClass{
             width: 100px;
             height: 100px;
              background: red;
         }
     </style>
</head>
<body>
<input type="button" onclick="show()" value="获取">
<input type="button" onclick="setElment()" value="设置">
<input type="button" onclick="deleteElment()" value="删除属性">
 <div id="tv_div" >

 </div>
<script>
     //实现样式的添加、移除、获取
    function show() {
          alert($("#tv_div").prop("class"))
    }
     function setElment() {
           $("#tv_div").prop("class","getClass")
     }
      function deleteElment() {
          $("#tv_div").removeProp("class");
      }  
</script>

jQuery的遍历迭代

<script>
    $(function () {
        var unm = [123, 456, 89, '13', 15,];//js对象
        //第一种：和javascript的遍历一样，普通的for遍历
        for (var i=0;i<unm.length;i++){
            alert(unm[i] + "0" + i);
        }
        //jq遍历两种方式
        // 第二种
        $.each($(unm), function (index) {//this是js对象，index代表对应对象索引
            alert(this + "0" + index);
        });
        // 第三种，第一个参数是需要遍历的数据(这个数据必须是jquery对象，如果不是可以转换为jQuery对象) 第二个参数是回调，也就是遍历出来的对象需要执行操作，this代表当前循环出的对象，也是JavaScript对象，index也代表当前对象的索引
        $(unm).each(function (index) {
            alert(this + "0" + index);

        })
    })
</script>

jQuery中的追加方法：

html()方法追加，每次都会替换掉指定便签内的内容，所以需要特别的追加方法解决。

常用方法：

append() 向末尾来追加标签 ==>往指定标签里添加内容
appendTo() 向末尾来追加标签 ==》把指定内容添加到标签
prepend() 向最前面追加==》往指定标签内添加内容
prependTo() 向最前面追加 ==>把指定内容添加到标签

用法：

  <input type="button" onclick="add()" value="追加">
  <ul id="tv_ul">
      <li>aaa</li>
  </ul>
   <script>
        function add() {//使用的格式
           $("#tv_ul").append("<li>"+"bbbb"+"</li>");
            $("<li>"+"bbbb"+"</li>").appendTo($("#tv_ul"))

            $("#tv_ul").prepend("<li>"+"bbbb"+"</li>");
            $("<li>"+"bbbb"+"</li>").prependTo($("#tv_ul"))
        }
       
   </script>

类评论区的实现：

实现效果：

在这里插入图片描述

<body>
<table id="tv_table" border="1px" style="border: 1px red solid">

</table>
标题：<input type="text" id="tv_titile"><br>
内容：<textarea id="tv_textarea"></textarea>
<input type="button" value="提交" onclick="addContent()">
<script>
    function addContent() {
        var tv_titile = $("#tv_titile").val();
        var tv_textarea=$("#tv_textarea").val();
        var temp="";
        temp+="<tr><td>"+tv_titile+"</td><td>"+tv_textarea+"</td></ty>";
        $("#tv_table").append(temp);
    }
</script>
</body>

使用追加方法实现的省级联动：

<body>
<select onchange="show(this.value)"><!--this.value 当前对象select的option的value值-->
    <option>-------请选择-----</option>
    <option value="0">上海</option>
    <option value="1">北京</option>
    <option value="2">广州</option>
</select>
<select id="tv">
    <option>--------请选择-----</option>
</select>
<script>
    var arr = new Array(3);//定义一个数组
    arr[0] = ["海淀区", "朝阳区", "房山区"];//将要联动显示的内容加进来
    arr[1] = ["闵行区", "红灯区", "15区"];
    arr[2] = ["流沙河", "通天河", "南沙河"];

    function show(index) {
        //使用html()实现
        /*var tv_citys = arr[index];//获取选择到的城市联动的内容
        $("#tv").html("");//先清空，二级联动
        var tem = "";//拼接的变量
        $(tv_citys).each(function () {//遍历jq对象出来的是js对象
            tem += "<option>" + this + "</option>";
        });
        $("#tv").html(tem);*/
        //使用append（）在末尾追加标签和文本
        var tv_citys = arr[index];//获取选择到的城市联动的内容
        $("#tv").html("");//先清空，二级联动

        $(tv_citys).each(function () {//遍历jq对象出来的是js对象
            var tem = "<option>" + this + "</option>";
            $("#tv").append(tem);
        });
    }

</script>

jq实现的全选和反选：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.8.3.js"></script>
    <style>
        td {
            text-align: center;
        }

        #xun {
            text-align: center;
        }

        table {
            width: 200px;
            height: 100px;
            background: #cccc;
        }

        .getclass {
            background: red;
        }
    </style>
</head>
<body>
<div id="xun">
    <input type="button" value="全选" onclick="qunaxuan()">
    <input type="button" value="全不选" onclick="buxaun()">
    <input type="button" value="反选" onclick="fanxuan()">
</div>

<table border="0" cellspacing="0" cellpadding="0" width="300px" align="center">
    <tr>
        <td><input type="checkbox" name="chec" class="che"></td>
        <td>456</td>
        <td>123</td>
        <td>456</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="chec" class="che"></td>
        <td>456</td>
        <td>789</td>
        <td>987</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="chec" class="che"></td>
        <td>456</td>
        <td>789</td>
        <td>987</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="chec" class="che"></td>
        <td>456</td>
        <td>789</td>
        <td>987</td>
    </tr>
</table>
<script>
    $(function () {
        $("tr:odd").addClass("getclass");
    })

    function qunaxuan() {
        $(".che").prop("checked", true);//自带遍历

    }

    function buxaun() {
        $(".che").prop("checked", false);

    }

    function fanxuan() {
        //第一种实现方式通过选择器和prop（）实现
        /* var unm = $(".che:checked");
         var unm2 = $(".che:not(.che:checked)");
         unm.prop("checked", false);
         unm2.prop("checked", true);*/
        //第二种使用each（）遍历和prop（）的形式实现
        var unm = $(".che");
        $(unm).each(function () {//遍历unm
            var temp = $(this).prop("checked");//获取当前状态checked的状态
            $(this).prop("checked", !temp);//将当前状态的checked取相反值
        })
    }
</script>
</body>
</html>

实现按钮计时点击：

实现效果：

在这里插入图片描述

实现代码：

<input type="button" value="请阅读5秒">

<script>
    var i = 5;
    var inter = null;
    $(function () {
        $("input").prop("disabled",true);//在页面加载完成后加载函数先把按钮设置威禁止状态
        inter = setInterval("jishi()", 1000);
    });
    function jishi() {
        i--;
        $("input").val("请阅读" + i + "秒");
        if (i == 0) {
            $("input").removeProp("disabled");
            clearInterval(inter);
            $("input").val("请登录");
        }
    }
</script>

jQuery的字符拼接：

<body>
<select>
<!--这是要动态插入的内容-->
</select>
<script>
    $(function () {
        var unm = ["上海", "北京", "广州"];
        var sel = $("select");
        $(unm).each(function (index) {
            temp = "<option value=" + 字符动态拼接 + ">" + this + "</option>";
            sel.append(temp);
        })
    })
</script>
</body>

jQuery实现如图：

在这里插入图片描述

实现代码：(注意：select 加multiple 这个属性可以实现多选)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右追加内容</title>
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<select id="le_select" style="width: 200px;height: 100px" multiple><!--multiple可以选中多个条目-->
    <option>左一</option>
    <option>左二</option>
    <option>左三</option>
    <option>左四</option>
</select>
<input type="button" value="向右移动选择条例" onclick="add_r()">
<input type="button" value="向右移动全部条例" onclick="addAll_r()">
<input type="button" value="向左移动选择条例" onclick="add_lef()">
<input type="button" value="向左移动全部条例" onclick="addAll_lef()">
<select id="ri_select" style="width: 200px;height: 100px" multiple>
    <option>右一</option>
    <option>右二</option>
    <option>右三</option>
    <option>右四</option>
</select>
<script>
    function add_r() {
        $("#le_select option:selected").appendTo($("#ri_select"))//将选中的option追加到另一个select
    }

    function addAll_r() {
        $("#le_select option").appendTo($("#ri_select"))
    }

    function add_lef() {
        $("#ri_select option:selected").appendTo($("#le_select"));
    }

    function addAll_lef() {
        $("#ri_select option").appendTo($("#le_select"))
    }

</script>
</body>
</html>

jquery 中的事件

注意：js 中的事件都没有on

使用：

<input type="button" value="确定" id="tv_btn">

<script>
     $("#tv_btn").click(function () {//无需写在标签里面，没有on开头，在事件方法括号里面写回调函数
          alert("我被点击了");
     });

</script>

常用的事件

点击事件 click();
鼠标移入的时候 mouseover()
鼠标移除的时候 mouseout（）

事件集：

在这里插入图片描述

jquery 中操作css

$("#menu-ul").css({"display":"block"})//获取属性名，设置其值

获取表格第一行第二个元素

<body>
<table id="tv_table">
    <tr><td>1</td>
        <td>2</td>
    </tr>

    <tr><td>3</td>
        <td>4</td>
    </tr>
</table>

  <script>
      $(function () {
        //获取表格第一行第二个元素
          alert($("#tv_table tr:eq(0)  td:eq(1)").text());

      });

  </script>

</body>

Validate重写表单的验证

第一步：导入js文件
第一个文件是jquery==>第二个文件是jquery.validate==>第三个文件messages_zh（实现对中文的支持）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.8.3.js"></script><!--一定要按照这个循序导入-->
    <script src="js/jquery.validate.js"></script>
    <script src="js/messages_zh.js"></script>
</head>

第二步：准备好要验证的表单代码：

<form id="f1">
    <table border="1" width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="3"><font color="cornflowerblue" size="5">测试表单</font></td>
        </tr>
        <tr>
            <td>用户名（必填字段，长度范围6~10）</td>
            <td colspan="2">
                <input type="text" name="username"/>
            </td>
        </tr>
        <tr>
            <td>Email（符合邮件格式）</td>
            <td colspan="2">
                <input type="text" name="email"/>
            </td>
        </tr>
        <tr>
            <td>出生日期（日期格式）</td>
            <td colspan="2">
                <input type="text" name="birthday"/>
            </td>
        </tr>
        <tr>
            <td>薪资（数字）</td>
            <td colspan="2">
                <input type="text" name="sal"/>
            </td>
        </tr>
        <tr>
            <td>一天工作时长（值范围6~16）</td>
            <td colspan="2">
                <input type="text" name="workForday"/>
            </td>
        </tr>
        <tr>
            <td>密码（必须填写）</td>
            <td colspan="2">
                <input type="text" name="pwd" id="pwd"/>
            </td>
        </tr>
        <tr>
            <td>确认密码（必须填写，且与密码值要相同）</td>
            <td colspan="2">
                <input type="text" name="repwd"/>
            </td>
        </tr>
        <tr>
            <td>身份证</td>
            <td colspan="2">
                <input type="text" name="idNumber"/>
            </td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2">
                <input type="submit" value="注册"/>
            </td>
        </tr>
    </table>
</form>

第三步：为指定表单加入校验

validate需要手动的声明，对那个表单进行校验，及需要手动调用validate()方法。

<script>
	$(function () {
		//为指定表单加入校验
		$("#form表单ID").validate();
	});
</script>

例如上表：

<script>
	$(function () {
		//为id为f1表单加入校验
		$("#f1").validate();
	});
</script>

第四步：需要使用校验的input标签加入规则

标签使用规则是在validate（）中指定添加规则的（这里的不符合校验规则提示信息都是label标签）
validae里面有rules,messages用，隔开，其中rules是用来指定那个name属性的值使用什么规则使用的时候用{ }起来。
messages是用来修改指定name=“value” 的value使用的某个规则的提示信息。校验规则写在name=“value”的value：{ }里，用，隔开，不同name的value值使用，隔开

<script>
    $(function () {//加载函数
//自定义规则，实现对身份证的验证
        $.validator.addMethod("changeRules",function (value,ele,params) {
            var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
       return reg.test(value);//验证value是否符合正则表达
        },"你输入的有误");
//

        $("#f1").validate({
            rules:{//使用：谁调用了什么规则
                username:{
                    //name值为username的input标签写规范
                    required:true,//检验规则
                    //设置最大最小长度
                    /*minLength:6,
                    maxLength:10*/
                    rangelength:[6,11],

                },
                email:{//name值为email的input标签写规范
                    email:true//验证enail
                },
                birthday:{
                    date:true//验证是否符合时间的格式
                },
                sal:{
                    number:true//验证是否是数字包括正负数字
                },
                workForday:{
                    /*min:6,
                    max:16,*/
                    range:[6,16]//是否在数值范围
                },
                pwd:{
                    required: true//是否必填
                },
                repwd:{
                    required: true,
                    equalTo:pwd//两个value值是否相同

                },
                idNumber:{
                    changeRules:true//自定义规则，判断是否符合身份证格式
                }

            },
            messages:{//设置规则的提示详细
                username:{//给name=username的标签修改规则（谁要修改为怎样的提示消息）
                   required:"你的输入不能为空" //指定你要修改的规则的提示
                },
                email:{
                    email:"你输入的邮箱不正确"
                }
            },
        });
    })
</script>

$.validator.addMethod的使用：

如果希望自定义校验规则，需要在为表单加入校验之前，使用$.validator.addMethod完成。

使用：$.validator.addMethod(name , method , message);，写在validate之前

参数1：name，校验规则的名称。例如：required range

参数2：method，执行校验时调用的函数。

function (value,ele,params) {
         //参数value：表单项的value值。例如：<input value="">
		 //参数ele：被校验的表单项对象。  一般不用
	    //参数params：使用当前校验规则传递的值。例如：rules : { 规则1: 规则值params }

        }

参数3：message，校验未通过时的提示信息。

规则速查表：

校验类型	取值	描述
required	true\|false	必填字段
email	true\|false	邮件地址
date	true\|false	日期，适用于通过的日期格式 YYYY YYYY-MM YYYY-MM-dd YYYY/MM/dd YYYY/MM/dd hh:mm:ss
dateISO	true\|false	日期（YYYY-MM-dd）
number	true\|false	数字（负数，小数）
digits	true\|false	整数
minlength	填写具体数字	最小长度
maxlength	填写具体数字	最大长度
rangelength	[minL,maxL]	长度范围
min		最小值
max		最大值
range	[min,max]	值范围
equalTo	jQuery选择器表达式	两个值相同.值相同允许，值不同
remote	url路径	ajax校验
url		路径