jQuryeasyui(3)——Form表單基本校驗(yàn)

在使用form表單時(shí)，輸入的屬性是有格式要求或長(zhǎng)度等等要求的，可以使用js實(shí)現(xiàn)也可使用后臺(tái)實(shí)現(xiàn)。例如：在新增用戶信息時(shí)，用戶名是必須填寫(xiě)的并要有長(zhǎng)度限制等等，email要有格式限制等等。使用jQuery easyui實(shí)現(xiàn)驗(yàn)證：

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序定制開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了撫寧免費(fèi)建站歡迎大家使用！

注：引入相關(guān)的js、css文件

html代碼：

<div class="easyui-panel" >
    <div>
        <form action="" method="post">
        <table>
        <tr>
            <td>賬戶：</td>
            <td><input id="username" class="easyui-validatebox" required=true validType="UserLength[2,7]" missingMessage="賬戶必填" type="text" name="username" /></td>
        </tr>
        <tr>
            <td>密碼：</td>
            <td><input class="easyui-validatebox" required=true validType="PwdLength[6]" type="password" name="password" /></td>
        </tr>
        <tr>
            <td>性別：</td>
            <td>男<input type="radio" checked="checked" name="sex" />
                &nbsp;&nbsp;女<input type="radio" name="sex" />
            </td>
        </tr>
        <tr>
            <td>生日：</td>
            <td><input id="birthday" type="text" name="birthday" /></td>
        </tr>
        <tr>
            <td>城市：</td>
            <td><input id="city" type="text" name="city" /></td>
        </tr>
        <tr>
            <td>薪金：</td>
            <td><input id="salary" type="text" name="salary" /></td>
        </tr>
        <tr>
            <td>郵箱：</td>
            <!-- email是jquery easyui已經(jīng)定義好的校驗(yàn)  -->
            <td><input id="email" class="easyui-validatebox" validType="email" type="text" name="email" /></td>
        </tr>
        </table>
        </form>
    </div>
</div>

jQuery代碼：

$(document).ready(function(){
    //自定義校驗(yàn)
    $.extend($.fn.validatebox.defaults.rules, {
        //自定義驗(yàn)證的名稱(chēng)
        UserLength: {
            //value 是輸入的值，param是html中（UserLength[2,7]）參數(shù)值
            validator: function(value, param){
                return value.length >= param[0]&&value.length <= param[1];
            },
         //不符合自定義驗(yàn)證時(shí)的提示信息
            message: '賬戶字符的長(zhǎng)度必須在{0}到{1}個(gè)間.'
        },
        PwdLength:{
            validator:function(value,param){
                return value.length >=6 ;
            },
            message:"密碼長(zhǎng)度至少為{0}位"
        }
    });
                                             
    //日期輸入框
    $("#birthday").datebox();
                                             
    //下拉列表框 也可以使用select 標(biāo)簽實(shí)現(xiàn)
    $("#city").combobox({
        url:"city.json",
        valueField:"city",
        textField:"city"
    });
    //數(shù)字輸入框 只允許輸入數(shù)字
    $("#salary").numberbox({
        min:2000,
        max:100000,
        required:true,
        missingMessage:"薪資必填！",
        precision:2
                                                 
    });
});

city.json 下拉列表中要顯示的值，如：

[

{"id":1,"city":"上海"},

{"id":2,"city":"北京"},

{"id":3,"city":"深圳"}

]

名稱(chēng)欄目：jQuryeasyui(3)——Form表單基本校驗(yàn)
文章出自：http://bm7419.com/article12/igehgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、企業(yè)建站、微信小程序、Google、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)