最近在用 jquery的插件easyui,由于validatebox的默认只有3种验证模式。想有一个符合自己需求的这种ajax的验证,在网上百般搜索代码,没有一个能用的。无奈自己看着手册摸索一个。
自己第一个版本失败了,每次输入字符cpu都在蠢动。郁闷、肯定是验证太不严谨。由于手册比较简单,不懂jeasy的重写视图。期间参阅许多大才们的文章。可惜忘了收藏...没法贴出。
【html代码】
<input class="easyui-validatebox" required="true" validType="loginName[位数, 远程验证文件, 命名, 参数3可选]" missingMessage="不为空提示"></input>
【js代码】
$.extend($.fn.validatebox.defaults.rules, {
loginName: {
// param 参数集合
validator: function (value, param) {
if (value.length < param[0]) {
$.fn.validatebox.defaults.rules.loginName.message = '用户名要' + param[0] + '位数!';
return false;
} else {
if (!/^[\w]+$/.test(value)) {
$.fn.validatebox.defaults.rules.loginName.message = '用户名只能英文字母、数字及下划线的组合!';
return false;
} else {
var postdata = {};
if (param[3]) {
postdata[param[2]] = param[3];
} else {
postdata[param[2]] = value;
}
var result = $.ajax({
url: param[1],
data: postdata,
type: 'post',
dataType: 'json',
async: false,
cache: false
}).responseText;
if (result == 'false') {
$.fn.validatebox.defaults.rules.loginName.message = '用户名已存在!';
return false;
} else {
return true;
}
}
}
},
message: ''
}
【远程验证脚本】
//这个可以根据自己的脚本写
//一系列SQL查询,返回结果
if (NO){
return true;
} else {
return false;
}
【jeasyui官网】
http://www.jeasyui.com
【附上这位大才的翻译】
http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html
如有错误和不严谨的地方望各位看官不吝指教。
分享到:
相关推荐
2. **用户名验证**:对于用户名字段,开发者可以设置规则来检查输入是否包含非法字符,或者是否满足特定的字符长度要求。例如,只允许输入6到20个字母、数字或下划线的组合。 3. **密码验证**:密码验证通常要求...
本篇将详细探讨"jQuery+easyui validatebox"这一主题,以及如何利用它们实现高效的数据验证。 jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。通过提供简洁的API,jQuery...
- **自定义主题**:EasyUI 提供了主题生成工具,允许开发者根据品牌风格定制自己的 UI 设计。 - **插件扩展**:除了核心组件外,社区还提供了许多第三方插件,如拖放排序、图表、富文本编辑器等。 - **Ajax 数据绑定...
<input type="password" id="password" name="password" class="easyui-validatebox" data-options="required:true,validType:'length[6,16]'"> ``` 表单验证可以通过 JavaScript 进行: ```javascript $('#ff'...
- **验证规则**: 使用 `validatebox` 组件进行表单验证。 #### 6. **主题与样式定制** - **主题切换**: EasyUI 支持多种预定义主题,并且可以轻松地切换不同的主题。 - **自定义样式**: 通过修改主题 CSS 文件或...
需要注意的是,EasyUI 的验证规则可以通过 `data-options` 属性进行自定义,支持多种验证类型,如 `email`、`url`、`date` 等。此外,还可以使用 `onBeforeSubmit` 和 `onError` 事件进行更复杂的处理。 总的来说,...
EasyUI是一种基于jQuery的前端...通过以上知识点的学习,读者应该能够理解和掌握easyui validatebox的基本使用方法,以及如何自定义一些特定的验证规则,从而在实际开发中有效利用easyui validatebox进行表单数据验证。
然而,有时内置的验证方式可能无法满足所有需求,这时可以自定义Ajax远程校验方法。这需要重写`$.fn.validatebox.defaults.rules`,添加一个新的验证规则。例如,创建一个名为`remote_user`的验证规则: ```...
在这个例子中,我们为用户名和密码字段添加了`required="true"`属性,这是EasyUI内置的验证规则,表示这两个字段不能为空。 然后,编写JavaScript代码来处理表单提交和验证。在`<script>`标签内,添加以下代码: `...
- **easyui-validatebox**:适用于文本输入框和下拉列表的验证 - **easyui-numberbox**:专门用于验证数值输入 #### 属性配置 - **required**: 指定是否为必填项,默认值为`false`。设置为`true`时,表示该字段必须...
<input type="text" name="username" class="easyui-validatebox" data-options="required:true,missingMessage:'用户名不能为空'"> ``` 在这个例子中,`required:true`表示该字段是必填的,而`missingMessage`则...
在jQuery EasyUI中,表单验证主要依赖于 `validatebox` 类,这个类提供了丰富的验证规则和属性,以确保用户输入的有效性。以下是一些关键概念和方法: 1. **validatebox 类**:这个类是表单验证的基础,通过给输入...
在EasyUI的表单验证中,可以利用validType属性来设置特定的验证规则,比如判断两个密码输入框内容是否一致。在HTML中,只需要为确认密码的输入框设置validType属性为"equalTo['#password']",其中"#password"是另一...
EasyUi的验证功能不仅限于内置规则,还可以通过扩展`$.fn.validatebox.defaults.rules`来添加自定义验证规则。 ```javascript $.extend($.fn.validatebox.defaults.rules, { CHS: { validator: function(value) {...