您現在的位置: 365建站網 > 365學習 > 表單美化的方法(css/html5/jquery)

表單美化的方法(css/html5/jquery)

文章來源:365jz.com     點擊數:516    更新時間:2019-06-23 00:24   參與評論

主要講解表單美化,授之以魚不如授之以漁,所以主要是對方法和思路的分享,對單選按鈕、復選按鈕(復選框)、文本框及下拉列表進行美化;對象不同,美化方法亦不同,讓你網頁中的表單與眾不同。

正文:

1.表單美化_單選按鈕篇

2.表單美化_復選按鈕篇

3.表單優化_文本框篇

表單美化_單選按鈕篇

目錄:

效果圖:

00.gif

第一步:

保存圖片:radiobutton.gif

11.gif

第二步:

新建公用CSS:public.css

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    padding: 0;
    margin: 0;
}fieldset, img {
    border: 0;
}table {
    border-collapse: collapse;
    border-spacing: 0;
}ol, ul {
    list-style: none;
}address, caption, cite, code, dfn, em, strong, th, var {
    font-weight: normal;
    font-style: normal;
}caption, th {
    text-align: left;
}h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
}q:before, q:after {
    content: '';
}abbr, acronym {
    border: 0;
}


第三步:

新建radio.HTML文件

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表單美化_單選按鈕篇</title>
    <link type="text/css" rel="stylesheet" href="css/public.css">
    <style type="text/css">
        body {
            font: 12px/22px "微軟雅黑";
        }
        a {
            text-decoration: none;
            color: #000;
        }
        .type {
            width: 400px;
            height: 32px;
            border: 1px solid #DFDFDF;
            margin: 30px auto 0;
        }
        .type dl {
            height: 32px;
            line-height: 32px;
            padding-left: 15px;
        }
        .type dl dt {
            float: left;
        }
        .type dl dd {
            float: left;
            margin: 0 10px 0 8px;
            position: relative;
            padding-left: 23px;
        }
        .type dl dd a {
            display: block;
        }
        .type dl dd a:hover {
            color: #CC0000;
            text-decoration: underline;
        }
        .type dl dd b {
            width: 20px;
            height: 20px;
            background: url(./images/radiobutton.gif) no-repeat -15px -18px;
            display: block;
            position: absolute;
            left: 0;
            top: 6px;
        }
        .type dl dd a:hover b {
            background-position: -15px -118px;
        }
        .type dl .selected b, .type dl .selected a:hover b {
            background-position: -15px -218px;
        }
    </style></head><body><div class="type">
    <dl id="type">
        <dt>配送類型:</dt>
        <dd class="selected" onclick="show(0)"><a href="#"><b></b>全部</a></dd>
        <dd><a href="#" onclick="show(1)"><b></b>京東配送</a></dd>
        <dd><a href="#" onclick="show(2)"><b></b>第三方配送</a></dd>
    </dl></div><script type="text/JavaScript">
    function $(id) {        return document.getElementById(id);
    }    function show(index) {        var dd = $("type").getElementsByTagName("dd");        for (var i = 0; i < dd.length; i++) {            if (i == index) {
                dd[i].className = "selected";
            }            else {
                dd[i].className = null;
            }
        }
    }</script></body></html>


表單美化_復選按鈕篇

目錄:

效果圖:

21.gif

第一步:

保存圖片:checkbox.gif

22.gif

第二步:

新建checkbox.html文件

注意:引入前面的公用css樣式 public.css

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表單美化_復選按鈕篇</title>
    <link type="text/css" rel="stylesheet" href="css/public.css">
    <style type="text/css">
        .typeList {
            width: 540px;
            height: 30px;
            margin: 50px auto;
            border: 1px solid #DFDFDF;
            border-width: 1px 0;
            overflow: hidden;
        }
        .typeList ul {
            height: 30px;
            line-height: 30px;
            padding-left: 15px;
        }
        .typeList ul li {
            position: relative;
            float: left;
            margin-right: 10px;
        }
        .typeList ul li input {
            display: none;
        }
        .typeList ul li b {
            width: 20px;
            height: 20px;
            background: url("images/checkbox.gif") no-repeat -12px -19px;
            display: block;
            position: absolute;
            top: 6px;
            left: 0;
        }
        .typeList ul li:hover b {
            background-position: -12px -119px;
        }
        .typeList ul .selected b,
        .typeList ul .selected:hover b {
            background-position: -12px -219px;
        }
        .typeList ul li label {
            padding-left: 23px;
        }
    </style></head><body><div class="typeList">
    <form action="#" method="post" name="typeList">
        <ul id="checkList">
            <li class="selected">
                <input type="checkbox" name="typeList" id="xiao">
                <label for="xiao">消費者保障</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="broken">
                <label for="broken">破損補寄</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="sevenDays">
                <label for="sevenDays">7天退換</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="good">
                <label for="good">正品</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="ele">
                <label for="ele">電子憑證</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="wang">
                <label for="wang">旺旺在線</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="pin">
                <label for="pin">品牌授權</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="pay">
                <label for="pay">貨到付款</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="credit">
                <label for="credit">信用卡</label>
            </li>
        </ul>
    </form>
    <script type="text/javascript">
        function createTag() {//動態創建b標簽            let _li = document.getElementById("checkList").getElementsByTagName("li");
            let _label;            for (let i = 0; i < _li.length; i++) {
                _label = _li[i].getElementsByTagName('label');
                let _bTag = document.createElement("b");
                _li[i].insertBefore(_bTag, _label[0]);                //    insertBefore(newnode,existingnode) 方法在您指定的已有子節點之前插入新的子節點。
                //    newnode 必需。需要插入的節點對象。
                //    existingnode 可選。在其之前插入新節點的子節點。如果未規定,則 insertBefore 方法會在結尾插入 newnode。            }
        }        function checkList() {//點擊變換效果            let _li = document.getElementById("checkList").getElementsByTagName("li");            for (let i = 0; i < _li.length; i++) {
                _li[i].onclick = function () {                    if(this.className=='selected'){                        this.className=null;
                    }else {                        this.className='selected';
                    }
                }
            }
        }
        window.onload = function () {
            createTag();
            checkList();
        }    </script></div></body></html>


表單優化_文本框篇

目錄:

效果圖:

31.gif

第一步:

保存圖片:

invalid.png

32.png

red_asterisk.png

33.png

第二步:

新建text.html文件,并引入公用css: public.css

<!DOCTYPE html><html><head><meta charset="utf-8"><title>表單優化_文本框篇</title><link rel="stylesheet" type="text/css" href="css/public.css"><style>/* === Remove input autofocus webkit === */body{font:13px/26px "微軟雅黑";}*:focus {outline: none;}.contact{width:720px;background:#F1F1F1;margin:20px auto;padding:10px;}/* === Form Typography === */.contact_form h2{font-size:18px;font-weight:bold;}.contact_form label{font-size:14px;}.form_hint, .required_notification{font-size: 12px;}/* === List Styles === */.contact_form ul {width:720px;list-style-type:none;list-style-position:outside;padding:0px;}.contact_form li{padding:12px; border-bottom:1px solid #DFDFDF;position:relative;} .contact_form li:first-child, .contact_form li:last-child {border-bottom:1px solid #777;}/* === Form Header === */.contact_form h2 {margin:0;display: inline;}.required_notification {color:#d45252; margin:5px 0 0 0; display:inline;float:right;}/* === Form Elements === */.contact_form label {width:150px;margin-top: 3px;display:inline-block;float:left;padding:3px;}.contact_form input {height:20px; width:220px; padding:5px 8px;}.contact_form textarea {padding:8px; width:300px;}.contact_form button {margin-left:156px;}
    /* form element visual styles */.contact_form input, .contact_form textarea { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;}.contact_form input:focus, .contact_form textarea:focus {
    background: #fff url(images/red_asterisk.png) no-repeat; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:70px;}/* === HTML5 validation styles === */    .contact_form input:required, .contact_form textarea:required {background: #fff url(images/red_asterisk.png) no-repeat 98% center;}.contact_form input:required:valid, .contact_form textarea:required:valid {background: #fff url(images/valid.png) no-repeat 98% center;box-shadow: 0 0 5px #5cd053;border-color: #28921f;}.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {background: #fff url(images/invalid.png) no-repeat 98% center;box-shadow: 0 0 5px #d45252;border-color: #b03535;}/* === Form hints === */.form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; 
    position: absolute; 
    display: none;}.form_hint::before {
    content: "\25C0";
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;}.contact_form input:focus + .form_hint {display: inline;}.contact_form input:required:valid + .form_hint {background: #28921f;}.contact_form input:required:valid + .form_hint::before {color:#28921f;}
    /* === Button Style === */button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;}button.submit:hover {
    opacity:.85;
    cursor: pointer; }button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset; 
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
    }</style>
    <script src="http://www.jiawin.com/wp-content/themes/javin/js/jQuery.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){                            
        $('#ads_close').click(function(e){
            $('#ads_box').fadeOut();
            e.preventDefault();
        });
    });</script></head><body><div class="contact"><form class="contact_form" action="#" method="post" name="contact_form">
    <ul>
        <li>
             <h2>聯系我們</h2>
             <span class="required_notification">* 表示必填項</span>
        </li>
        <li>
            <label for="name">姓名:</label>
            <input type="text"  placeholder="Sunbest" required />
            <span class="form_hint">正確格式為:6~18個字符,可使用字母、數字、下劃線,需以字母開頭</span>
        </li>
        <li>
            <label for="email">電子郵件:</label>
            <input type="email" name="email" placeholder="sayingforever@163.com" required />
            <span class="form_hint">正確格式為:sayingforever@163.com</span>
        </li>
        <li>
            <label for="website">網站:</label>
            <input type="url" name="website" placeholder="http://www.amonyous.com" required pattern="(http|https)://.+"/>
            <span class="form_hint">正確格式為:http://www.amonyous.com</span>
        </li>
        <li>
            <label for="message">留言:</label>
            <textarea name="message" cols="40" rows="6" placeholder="" required ></textarea>
        </li>
        <li>
            <button class="submit" type="submit">提交</button>
        </li>
    </ul></form></div></body></html>



html5自帶表單驗證-美化改造

神奇的代碼

暫且叫做html5.css

/* === HTML5 validation styles === */.myform select:required,.myform input:required,.myform textarea:required {    background: #fff url(../img/red_asterisk.png) no-repeat 99% center;
}.myform select:required:valid,.myform input:required:valid,.myform textarea:required:valid {    background: #fff url(../img/valid.png) no-repeat 99% center;    box-shadow: 0 0 5px #5cd053;    border-color: #28921f;
}.myform select:focus:invalid,.myform input:focus:invalid,.myform textarea:focus:invalid {    background: #fff url(../img/invalid.png) no-repeat 99% center;    box-shadow: 0 0 5px #d45252;    border-color: #b03535}

完整的html代碼

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>申請電商開店</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- boot -->
    <link type="text/css" rel="stylesheet" href="{sh::PUB}css/font-awesome.min.css">
    <link rel="stylesheet" href="{sh::PUB}sui/css/sm.min.css">
    <link rel="stylesheet" href="{sh::PUB}sui/css/sm-extend.min.css">
    <link rel="stylesheet" href="{sh::PUB}plugin/html5/css/html5.css">
    </head><body>
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left" href="{sh::U('OpenStore/index')}">
            <span class="icon icon-left"></span>
            返回        </a>
        <h1 class='title'>申請電商開店</h1>
    </header>
    <div class="content">
        <form id="reg-form" class="myform" action="" onsubmit="return checkForm();" method="post">

        <div class="list-block">
            <ul>
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">手機號</div>
                            <div class="item-input">
                                <input name="UserName" id="UserName" type="text" placeholder="用于登錄"  pattern="^1[0-9]{10}$" required oninvalid="this.setCustomValidity('請輸入正確的號碼');" oninput="setCustomValidity('')">
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-password"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">密碼</div>
                            <div class="item-input">
                                <input name="Password" id="Password" type="password" placeholder="6~20位" class="" pattern="^[a-zA-Z0-9]\w{5,19}$" required oninvalid="this.setCustomValidity('6~20字母數字或下劃線');" oninput="setCustomValidity('')" onchange="checkPassword()">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-password"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">確認密碼</div>
                            <div class="item-input">
                                <input name="Repassword" id="Repassword" type="password" placeholder="確認密碼" class="" required onchange="checkPassword()">
                            </div>
                        </div>
                    </div>
                </li>
                
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">身份證號</div>
                            <div class="item-input">
                                <input name="CardId" id="CardId" type="text" placeholder="輸入身份證號" required pattern="^([0-9]){18}(x|X)?$" oninvalid="this.setCustomValidity('請輸入合法的身份證號');" oninput="setCustomValidity('')">
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-gender"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">開戶銀行</div>
                            <div class="item-input">
                                <select name="BankTypeId" id="BankTypeId" required>
                                    <option value="">==請選擇==</option>
                                    <option value="1">中國銀行</option>
                                    <option value="2">中國工商銀行</option>
                                    <option value="3">中國農業銀行</option>

                                    <option value="5">中國郵政儲蓄銀行</option>
                                    <option value="6">交通銀行</option>
                                    <option value="7">招商銀行</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">開戶支行</div>
                            <div class="item-input">
                                <input type="text" name="BankPlace" id="BankPlace" placeholder="開戶支行" required>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">開戶名</div>
                            <div class="item-input">
                                <input name="AccountName" id="AccountName" type="text" placeholder="開戶名" required>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">銀行賬號</div>
                            <div class="item-input">
                                <input name="Account" id="Account" type="text" placeholder="銀行賬號" required>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-gender"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">省</div>
                            <div class="item-input">
                                <select name="ProvinceId" id="ProvinceId" required>
                                    <option value="">==請選擇==</option>
                                    <volist name="Province" id="vo">
                                        <option value="{sh:$key}">{sh:$vo}</option>
                                    </volist>
                                    <option>江蘇省</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-gender"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">市</div>
                            <div class="item-input">
                                <select name="CityId" id="CityId" required>
                                    <option value="">==請選擇==</option>
                                    <option>宿遷市</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-gender"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">縣/區</div>
                            <div class="item-input">
                                <select name="CountyId" id="CountyId" required>
                                    <option value="">==請選擇==</option>
                                    <option>宿城區</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </li>

                
                <li class="align-top">
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-comment"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">街道地址</div>
                            <div class="item-input">
                                <textarea name="StreatAddress" id="StreatAddress" placeholder="收貨詳細地址" required></textarea>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-block">
            <div class="row">
                <div class="col-50"><a href="{sh::U('Store/OpenStore/index')}" class="button button-big button-fill button-danger">取消</a></div>
                <div class="col-50"><input type="submit" class="button button-big button-fill button-success" value="提交"></div>
            </div>
        </div>
        </form>
    </div>
    
    <script src="{sh::PUB}js/jquery-2.1.0.min.js" type="text/javascript"></script>
    <script src="{sh::PUB}plugin/layer/layer.js" type="text/javascript"></script>
    <script type="text/javascript">
        function checkPassword() {            var pass1 = document.getElementById("Password");            var pass2 = document.getElementById("Repassword");     
            if (pass1.value != pass2.value)
                pass2.setCustomValidity("兩次輸入的密碼不匹配");            else
                pass2.setCustomValidity("");
        }        // 驗證表單
        function checkForm() {            // ajax檢測賬號是否已存在
            
            return false;
        }    </script></body></html>

表單驗證是一套系統,它為終端用戶檢測無效的數據并標記這些錯誤,是一種用戶體驗的優化,讓web應用更快的拋出錯誤,但它仍不能取代服務器端的驗證,重要數據還要要依賴于服務器端的驗證,因為前端驗證是可以繞過的。

html5驗證的幾種類型:

1、valueMissing

目的:確保表單控件中的值已填寫。

用法:在表單控件中將required特性設置為true。

示例:

<input type="text" name="myText" required>

詳細說明:如果表單控件設置了required特性,那么在用戶填寫或者通過代碼調用方式填值之前,控件會一直處于無效狀態。例如,空的文本輸入框無法通過必填檢查,除非在其中輸入任意文本。輸入值為空時,valueMissing會返回true。

2、typeMismatch

目的:保證控件值與預期類型相匹配(如numbe、email、URL等).

用法:指定表單控件的type特性值。

示例:

<input type="email" name="myEmail">

詳細說明:特殊的表單控件類型不只是用來定制手機鍵盤, 如果瀏覽器能夠識別出來表單控件中的輸入不符合對應的類型規則,比如email地址中沒有@符號,或者number型控件的輸入值不是有效的數字,那么瀏覽器就會把這個控件標記出來以提示類型不匹配。無論哪種出錯情況,typeMismatch將返回true。

3、patternMismatch

目的:根據表單控件上設置的格式規則驗證輸入是否為有效格式。

用法:在表單控件上設置pattern特性,井賦予適當的匹配規則。

示例:

<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit
card number is 16 digits with no spaces or dashes">

詳細說明:pattern特性向開發人員提供了一種強大而靈活的方式來為表單的控件值設定正則表達式驗證機制。當為控件設置了pattern特性 后,只要輸入控件的值不符合模式規則,patternMismatch就會返回true值。從引導用戶和技術參考兩方面考慮,你應該在包含pattern特性的表 單控件中設置title特性以說明規則的作用。

4、tooLong

目的:避免輸入值包含過多字符。

用法:在表單控件上設置maxLength特性。

示例:

<input type="text" name="limitedText" maxLength="140">

詳細說明:如果輸入值的長度超過maxLength, tooLong特性會返回true。雖然表單控件通常會在用戶輸入時,限制最大長度,但在有些情況下,如通過程序設置,還是會超出最大值。

5、rangeUnderflow

目的:限制數值型控件的最小值。

用法:為表單控件設置min特性,并賦予允許的最小值。

示例:

<input type="range" name="ageCheck" min="18">

詳細說明:在需要做數值范圍檢查的表單控件中,數值很可能會暫時低于設置的下限。此時,ValidityState的rangeUnderflow特性將返回true。

6、rangeOverflow

目的:限制數值型控件的最大值。

用法:為表單控件設置max特性,并賦予允許的最大值。

示例:

<input type="range" name="kidAgeCheck" max="12">

詳細說明:與rangeUnderflow類似,如果一個表單控件的值比max更大,特性將返回true。

7、stepMismatch

目的:確保輸入值符合min、max及step即設置。

用法:為表單控件設置step特性,指定數值的增量。

示例:

<input type="range" name="confidenceLevel" min="0" max="100" step="5">

詳細說明:此約束條件用來保證數值符合min、max和step的要求。換句話說,當前值必須是最小值與step特性值的倍數之和。例如,范圍從0到100,step特性值為5,此時就不允許出現17,否則stepMismatch返回true值。

8、customError

目的:處理應用代碼明確設置及計算產生的錯誤。

用法:調用setCustomValidity(message)將表單控件置于customError狀態。

示例:

passwordConfirmationField.setCustomValidity("Password values do not match.");

詳細說明:瀏覽器內置的驗證機制不適用時,需要顯示自定義驗證錯誤信息。當輸入值不符合語義規則時,應用程序代碼應設置這些自定義驗證消息。

自定義驗證消息的典型用例是驗證控件中的值是否一致。例如,密碼和密碼確認兩個輸人框的值不匹配。只要定制了驗證消息,控件就會處于無效狀態,并且customError返回true。要清除錯誤,只需在控件上調用setCustomValidity("")即可。


如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (516人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 18禁真人床震无遮挡α片免费| 日本高清色本在线www| av潮喷大喷水系列无码观看| 年轻人免费观看视频| 很适合晚上一个人躲在被窝里| 亚洲欧美日韩偷拍综合一区| 激情亚洲av无码日韩色| 欧美同性videos可播放| 免费强奷视频网站| 五月丁香拍拍激情综合| 极品人妻互换| 在公车上被弄得腿软| 免费国产污网站在线观看不要卡| 小东西瞧你敏感的泛滥了| 国产欧美日韩一区二区图片| 4438x最大成长网站| 成年黄页网站大全免费无码| 第九色区av天堂| 李采潭的g点电影| 中国人体艺术| 男生自慰gay网址| 亚洲色拍自偷自拍首页| 亚洲产在线精品亚洲第一站| 被灌满了求你们了停下| 中国护士毛茸茸性| 邻居少妇人妻互换| 不断颤抖喷潮极度大喷潮| 色老大久久综合网天天| 合欢诀| 免费大片av手机看片不卡| 巨大垂乳日本熟妇| http://www.adolfopines.com