easyui输入框验证问题

最新推荐文章于 2021-10-12 15:35:38 发布

半栈学徒

最新推荐文章于 2021-10-12 15:35:38 发布

阅读量236

点赞数

分类专栏：前端文章标签： easyui

本文链接：https://blog.csdn.net/zwj13603571674/article/details/103904069

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

先上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="juqary-easyui/demo/demo.css">
    <link rel="stylesheet" href="juqary-easyui/themes/icon.css">
    <link rel="stylesheet" href="juqary-easyui/themes/default/easyui.css">
    <script src="juqary-easyui/jquery.min.js"></script>//先引入jquery
    <script src="juqary-easyui/jquery.easyui.min.js"></script>//后引入easyui，因为easyui是基于jquery的
    <script src="juqary-easyui/locale/easyui-lang-zh_CN.js"></script>
    <script>
        $(function () {
            $("#vv").validatebox({
                required: true,//定义为必填字段
                validType: 'maxLength[5]',//验证规则
                missingMessage: '请填写账号',//为空时输入信息
            });
            //验证规则
            $.extend($.fn.validatebox.defaults.rules, {
                maxLength: {
                //value：是你输入的值 param是参数
                    validator: function (value, param) {
                        console.log(value.length, param[0])
                        return value.length <= param[0];
                    },
                    //提示信息
                    message: 'please input at max {0} characters.'
                }
            });
        })

    </script>
</head>
<body>
<div id="wi" class="easyui-window">
    <form style="padding:10px 20px 10px 40px;">
        <p>名称：<input class="easyui-validatebox" type="text" id="vv"></p>
        <p>密码：<input class="easyui-textbox" type="password"></p>
        <div style="padding:5px;text-align:center">
            <a href="#" class="easyui-linkbutton" icon="icon-ok">确定</a>
            <a href="#" class="easyui-linkbutton" icon="icon-cancel">取消</a>
        </div>
    </form>
</div>
</body>
</html>

这样就完成了一个表单验证
但是现在要是给input再加一个样式

<p>名称：<input class="  easyui-textbox  easyui-validatebox"  type="text" id="vv"></p>

这样的话，你就会发现不起作用了验证
解决方案：
将js里面的验证属性放到标签里面
就是将下面这一块

$("#vv").validatebox({
    required: true,
    validType: 'maxLength[5]',
    missingMessage: '请填写账号',
});
 <p>名称：<input class="easyui-validatebox" type="text" id="vv"></p>

换成

<p>名称：<input class="  easyui-textbox  easyui-validatebox" data-options=" required: true,
        validType: 'manLength[5]',
        missingMessage:'请填写账号'" type="text" id="vv"></p>

这样改input就可以同时使用两个样式

半栈学徒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui输入框验证问题

先上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="juqary-easyui/demo/demo.css"&gt...
复制链接

扫一扫