黑马程序员技术交流社区

标题: HTML的表单标签及校验 [打印本页]

---

作者: 水煮牛蛙    时间: 2018-5-3 16:18
标题: HTML的表单标签及校验

HTML的表单标签及校验

1.HTML的表单标签：<form>
             * 常用属性:
                  * action属性:提交的路径.默认提交到当前页面
                  * method属性:请求的方式.GET和POST.默认是GET.
                      ***** GET方式和POST方式的区别?
                           * GET        :数据会显示到地址栏中.GET方式提交是有大小的限制.
                           * POST        :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
                                         *有很多提交方式,只是get和post比较常用


2.HTML中表单元素：
                * <input type=”text”>                :文本框.
                    * 常用属性:
                        * name        :表单元素的名称.必须有name属性，然后后台才可以接收数据.
                        * value        :文本框的默认值.
                        * size        :文本框的长度.
                        * maxlength:文本框输入的最大长度.
                        * readonly:只读文本框.
                            *disable : 废弃,定义该属性后,表单变灰
                * <input type=”password”>        :密码框.
                    * 常用属性:
                        * name        :表单元素的名称.必须有name属性，然后后台才可以接收数据.
                        * value        :密码框的默认值.
                        * size        :密码框的长度.
                        * maxlength:密码框输入的最大长度.
                        
               
                * <input type=”radio”>                :单选按钮.
                    * 常用的属性:
                        * name        :表单元素的名称.必须有name属性，然后后台才可以接收数据.
                        * value        :单选按钮的默认值.(必须定义值)
                        * checked:单选按钮默认被选中.
               
                * <input type=”checkbox”>        :复选按钮.
                 * 常用的属性:
                        * name        :表单元素的名称.必须有name属性，然后后台才可以接收数据.
                        * value        :单选按钮的默认值.(必须定义值)
                        * checked:单选按钮默认被选中.
                           
               
                * <input type=”button”>                :普通按钮.没有任何功能的按钮.
                * <input type=”submit”>                :提交按钮.
                * <input type=”reset”>                :重置按钮.
                * <input type=”file”>                :文件上传的表单项.
                * <input type=”hidden”>                :隐藏字段.
                * <input type=”image”>                :图片按钮
               
                * <select>                                        :下拉列表.
                * <textarea>                                :文本域.
               
                下拉列表
                         <select name="province">
                <option>--请选择--</option>
                <option value="北京" selected>北京</option>          :必需要有值value,实际选中的是value值,在页面中开到的值只是用来展示的
                     <option value="上海">上海</option>
                <option value="广州">广州</option>
                </select>
                * 文本域:
                <textarea cols="20" rows="4" name="info">我是：</textarea>


3.表单的校验
        3.1提交校验:
                3.1.1 JavaScript 的表单校验方法
               
                        在form标签中添加提交事件,出发的函数返回true时提交,false阻止提交
                        <form action="想跳转到的网页.html" method="post">
                                
                3.1.2 JQuery 的表单校验方法
               
                        1.给form标签动态绑定提交事件
                        2.使用JQuery事件中的  trigger(type,[data]) 事件,再次触发表单校验事件
                          对校验结果进行判断,如果输入不符合要求,该提交事件触发的函数返回一个false组织提交,
                          否则不返回值,提交成功.
                                         trigger(type,[data]) 事件:
                                                        在每一个匹配的元素上触发某类事件。
                                                        这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发
                                                        一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。
                        
                        
                        $("form").submit(function(){
                                $("form input[class='required']").trigger("blur");
                                //获取错误信息
                                var errorLength = $(".onError").length;
                                if(errorLength > 0){
                                        return false;
                                }
                        });
                        
        3.2数据校验
                                绑定一个失去焦点事件(blur),然后可以再链接其它的事件(比如键盘抬起,获取焦点),
                                这些链接的事件使用triggerHandler事件触发blur事件的函数,就可以实现校验.
                                $("form input").blur(function(){
                                        //获得该元素的父元素
                                        var $parent = $(this).parent();
                                       
                                        //将原有的信息清楚掉
                                        $parent.find(".formtips").remove();
                                       
                                        //确定输入项
                                        //如果是用户名
                                        if($(this).is("#userName")){
                                                //判断用户名是否为空
                                                if(this.value == ""){
                                                        //添加错误提示
                                                        $parent.append("<font class='formtips onError'>用户名不能为空</font>");
                                                }else{
                                                        //添加正确信息
                                                        $parent.append("<font class='formtips onSuccess'>输入正确</font>");
                                                }
                                        }
                                       
                                        //如果是密码框
                                        if($(this).is("#password")){
                                                if(this.value == ""){
                                                        $parent.append("<font class='formtips onError'>密码不能为空</font>");
                                                }else{
                                                        $parent.append("<font class='formtips onSuccess'>输入正确</font>");
                                                }
                                        }
                                       
                                }).keyup(function(){
                                        //绑定键盘抬起事件
                                        $(this).triggerHandler("blur");
                                }).focus(function(){
                                        $(this).triggerHandler("blur");
                                });
4.HTML5扩展的表单标签:
                        <input type=”email”>  :输入的数据要符合邮箱的格式
                        <input type=”date”>  :日期选择
                        <input type=”number”> :只能输入数字
                        <input type=”color”>   :产生一个颜色块;

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2