博客

EasyUI jQuery passwordBox widget

  • Post category:jquery

EasyUI jQuery passwordBox widget攻略

EasyUI是一款基于jQuery的UI组件库，其中包含了passwordBox widget用于创建密码输入框组件。下面我们来详细讲解使用该组件的步骤。

步骤一：引入必要的文件

使用passwordBox widget前需要先引入EasyUI和jQuery的文件。建议使用CDN引入，示例如下：

<!-- jQuery 1.11.3 or later (必须) -->
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- EasyUI 1.4.5 or later (必须) -->
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/jquery-easyui/1.4.5/themes/default/easyui.css">
<script type="text/javascript" src="//cdn.bootcss.com/jquery-easyui/1.4.5/jquery.easyui.min.js"></script>

步骤二：创建passwordBox组件

使用以下HTML代码来创建一个passwordBox：

<input class="easyui-passwordbox" id="passwordbox" prompt="请输入密码" showEye="true" buttonText="显示密码">

其中，class为“easyui-passwordbox”表示创建passwordBox组件；id为“passwordbox”表示该组件的id；prompt为组件中的提示文字；showEye为是否显示密码可见按钮；buttonText用于设置密码可见按钮的文字；

上述代码可通过以下JavaScript代码进行渲染成passwordBox：

$('#passwordbox').passwordbox({
    width: 300, // 设置组件宽度
    validType: 'length[6,30]', // 设定6~30个字符的长度限制
    required: true // 设置输入框是必须的
});

步骤三：获取passwordBox输入框的值

使用以下JavaScript代码来获取passwordBox组件中的输入值：

var password = $('#passwordbox').passwordbox('getValue');

示例一：自定义密码强度验证器

以下是一个自定义密码强度验证器的示例代码：（限制密码必须由字符、数字和符号三种字符类型组成）

$.extend($.fn.passwordbox.defaults.rules, {    
    passwordStrength: {
        validator: function (value, param) {
            return /^[A-Za-z]+[0-9]+[!@#$%^&*()_+{}|:",\<>?`\-=\[\]\\;'./~]*$/.test(value);
        },
        message: '密码必须由字符、数字和符号三种字符类型组成，且以字母开头。',
        param: []
    }
});

然后使用该验证器来对passwordBox的输入进行校验：

$('#passwordbox').passwordbox({
    validType: 'passwordStrength',
    required: true
});

示例二：动态设置passwordBox组件的属性

以下代码示例演示了如何动态设置passwordBox组件的属性：（通过按下一个按钮来修改密码输入框的required属性）

<input type="checkbox" id="checkRequired" />必填项<br />
<input class="easyui-passwordbox" id="passwordbox2" prompt="请输入密码" showEye="true" buttonText="显示密码">


<script type="text/javascript">
    $('#passwordbox2').passwordbox({
        width: 300,
        required: false
    });
    $('#checkRequired').click(function(){
        var required = $(this).prop('checked');
        $('#passwordbox2').passwordbox('options').required = required;
    });
</script>

以上就是使用EasyUI jQuery passwordBox widget的完整攻略，如有疑问请参考EasyUI官方文档或相关社区。

Tags: