jQuery EasyUI 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

ValidateBox

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息。

通过标签创建验证框。 为< input >标签增加名为'easyui-validatebox'的类。

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />

使用Javascript创建验证框。

<input id="vv" /> 
<script>
$('#vv').validatebox({    
    required: true,    
    validType: 'email'   
});  
</script>

验证规则

验证规则是根据使用需求和验证类型属性来定义的,这些规则已经实现:

  • email:匹配E-Mail的正则表达式规则。
  • url:匹配URL的正则表达式规则。
  • length[0,100]:允许在x到x之间个字符。
  • remote['http://.../action.do','paramName']:发送ajax请求需要验证的值,当成功时返回true。

自定义验证规则,需要重写$.fn.validatebox.defaults.rules中定义的验证器函数和无效消息。例如,定义一个最小长度(minLength)的自定义验证:

$.extend($.fn.validatebox.defaults.rules, {    
    minLength: {    
        validator: function(value, param){    
            return value.length >= param[0];    
        },    
        message: 'Please enter at least {0} characters.'   
    }    
});

现在就可以在输入框中限制最小长度为5的自定义最小长度验证了:

<input class="easyui-validatebox" data-options="validType:'minLength[5]'">

关于validatebox的属性与方法还有很多,我们就不多做介绍了,有兴趣的同学请看这里

自己去创建一个验证原密码和确认密码是否相同的规则吧。