前端中的業務場景

時間 2019-12-08

標籤前端業務場景简体版

原文原文鏈接

input框H5的新特性

一、accept 規定可經過文件上傳控件提交的文件類型。（僅適用於 type="file"）ajax

<input type="file" name="pic" accept="image/gif,image.jpg" />
複製代碼

容許上傳兩種文件類型：gif 和 jpeg正則表達式

2. autocomplete 規定是否使用輸入字段的自動完成功能。緩存

三、disabled 規定當頁面加載時是否禁用該 input 元素。（不適用於 type="hidden"）bash

四、height定義 input 字段的高度。（適用於 type="image"）dom

五、max規定輸入字段的最大值。請與 "min" 屬性配合使用，來建立合法值的範圍。函數

6.maxlength規定文本字段中容許的最大字符數（限制輸入長度）。優化

七、pattern規定輸入字段的值的模式或格式。例如 pattern="[0-9]" 表示輸入值必須是 0 與 9 之間的數字。ui

八、placeholder 規定幫助用戶填寫輸入字段的提示。spa

九、readonly 指示字段的值沒法修改。code

十、required 指示輸入字段的值是必需的。

正則表達式經常使用

. 匹配除換行符之外的任意字符

\w 匹配字母或數字或下劃線或漢字等價於 '[^A-Za-z0-9_]'

\s 匹配任意的空白符

\d 匹配數字

\b 匹配單詞的開始或結束

^ 匹配字符串的開始

$ 匹配字符串的結束

複選框全選、全不選、反選

經過給每一個標籤綁定相同的id名而後再for循環每一個進行遍歷設置checked的true（全選） false（全不選）值來達到。反選就是if（id名的爲checked設置爲false）

//表單驗證
        function check(){
            var ids = document.getElementsByName("ids");
            var flag = false ;
            for(var i=0;i<ids.length;i++){
                if(ids[i].checked){
                    flag = true ;
                    break ;
                }
            }
            if(!flag){
                alert("請最少選擇一項！");
                return false ;
            }
        }
        //全選
        function iselect(){ //其中函數字不能爲select 其爲JS保留字
            var ids = document.getElementsByName("ids");
            var all = document.getElementById("all");
            for(var i=0;i<ids.length;i++){
                ids[i].checked=all.checked;
            }
        }
        //全選
        function selectAll(){
            var ids = document.getElementsByName("ids");
            for(var i=0;i<ids.length;i++){
                ids[i].checked=true;
            }
        }
        //全不
        function selectNone(){
            var ids = document.getElementsByName("ids");
            for(var i=0;i<ids.length;i++){
                ids[i].checked=false;
            }
        }
        //反選
        function selectInvert(){
            var ids = document.getElementsByName("ids");
            for(var i=0;i<ids.length;i++){
                if(ids[i].checked)
                    ids[i].checked=false ;
                else
                    ids[i].checked=true ;
            }
        }
複製代碼