jQuryeasyui(3)——Form表单基本校验

在使用form表单时，输入的属性是有格式要求或长度等等要求的，可以使用js实现也可使用后台实现。例如：在新增用户信息时，用户名是必须填写的并要有长度限制等等，email要有格式限制等等。使用jQuery easyui实现验证：

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了抚宁免费建站欢迎大家使用！

注：引入相关的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已经定义好的校验  -->
            <td><input id="email" class="easyui-validatebox" validType="email" type="text" name="email" /></td>
        </tr>
        </table>
        </form>
    </div>
</div>

jQuery代码：

$(document).ready(function(){
    //自定义校验
    $.extend($.fn.validatebox.defaults.rules, {
        //自定义验证的名称
        UserLength: {
            //value 是输入的值，param是html中（UserLength[2,7]）参数值
            validator: function(value, param){
                return value.length >= param[0]&&value.length <= param[1];
            },
         //不符合自定义验证时的提示信息
            message: '账户字符的长度必须在{0}到{1}个间.'
        },
        PwdLength:{
            validator:function(value,param){
                return value.length >=6 ;
            },
            message:"密码长度至少为{0}位"
        }
    });
                                             
    //日期输入框
    $("#birthday").datebox();
                                             
    //下拉列表框 也可以使用select 标签实现
    $("#city").combobox({
        url:"city.json",
        valueField:"city",
        textField:"city"
    });
    //数字输入框 只允许输入数字
    $("#salary").numberbox({
        min:2000,
        max:100000,
        required:true,
        missingMessage:"薪资必填！",
        precision:2
                                                 
    });
});

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

[

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

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

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

]

名称栏目：jQuryeasyui(3)——Form表单基本校验
文章出自：https://www.cdcxhl.com/article12/igehgc.html

成都网站建设公司_创新互联，为您提供静态网站、关键词优化、企业建站、微信小程序、Google、

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联