`
zzz200100
  • 浏览: 35704 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

easyui-validatebox 的自定义用户名验证

阅读更多
最近在用 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

如有错误和不严谨的地方望各位看官不吝指教。
分享到:
评论

相关推荐

    EasyUi_validatebox 验证插件

    2. **用户名验证**:对于用户名字段,开发者可以设置规则来检查输入是否包含非法字符,或者是否满足特定的字符长度要求。例如,只允许输入6到20个字母、数字或下划线的组合。 3. **密码验证**:密码验证通常要求...

    jQuery+easyui validatebox 验证框

    本篇将详细探讨"jQuery+easyui validatebox"这一主题,以及如何利用它们实现高效的数据验证。 jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。通过提供简洁的API,jQuery...

    jquery easyui 模板

    - **自定义主题**:EasyUI 提供了主题生成工具,允许开发者根据品牌风格定制自己的 UI 设计。 - **插件扩展**:除了核心组件外,社区还提供了许多第三方插件,如拖放排序、图表、富文本编辑器等。 - **Ajax 数据绑定...

    jquery-easyui

    &lt;input type="password" id="password" name="password" class="easyui-validatebox" data-options="required:true,validType:'length[6,16]'"&gt; ``` 表单验证可以通过 JavaScript 进行: ```javascript $('#ff'...

    李炎恢jQuery EasyUI讲义代码

    - **验证规则**: 使用 `validatebox` 组件进行表单验证。 #### 6. **主题与样式定制** - **主题切换**: EasyUI 支持多种预定义主题,并且可以轻松地切换不同的主题。 - **自定义样式**: 通过修改主题 CSS 文件或...

    EasyUI在表单提交之前进行验证的实例代码

    需要注意的是,EasyUI 的验证规则可以通过 `data-options` 属性进行自定义,支持多种验证类型,如 `email`、`url`、`date` 等。此外,还可以使用 `onBeforeSubmit` 和 `onError` 事件进行更复杂的处理。 总的来说,...

    easyui validatebox验证

    EasyUI是一种基于jQuery的前端...通过以上知识点的学习,读者应该能够理解和掌握easyui validatebox的基本使用方法,以及如何自定义一些特定的验证规则,从而在实际开发中有效利用easyui validatebox进行表单数据验证。

    Jqurey-easyui验证

    然而,有时内置的验证方式可能无法满足所有需求,这时可以自定义Ajax远程校验方法。这需要重写`$.fn.validatebox.defaults.rules`,添加一个新的验证规则。例如,创建一个名为`remote_user`的验证规则: ```...

    结合easyui的用户验证

    在这个例子中,我们为用户名和密码字段添加了`required="true"`属性,这是EasyUI内置的验证规则,表示这两个字段不能为空。 然后,编写JavaScript代码来处理表单提交和验证。在`&lt;script&gt;`标签内,添加以下代码: `...

    JS校验框架信息

    - **easyui-validatebox**:适用于文本输入框和下拉列表的验证 - **easyui-numberbox**:专门用于验证数值输入 #### 属性配置 - **required**: 指定是否为必填项,默认值为`false`。设置为`true`时,表示该字段必须...

    easyui取消表单实时验证,提交时统一验证的简单实例

    &lt;input type="text" name="username" class="easyui-validatebox" data-options="required:true,missingMessage:'用户名不能为空'"&gt; ``` 在这个例子中,`required:true`表示该字段是必填的,而`missingMessage`则...

    jQuery EasyUI提交表单验证

    在jQuery EasyUI中,表单验证主要依赖于 `validatebox` 类,这个类提供了丰富的验证规则和属性,以确保用户输入的有效性。以下是一些关键概念和方法: 1. **validatebox 类**:这个类是表单验证的基础,通过给输入...

    jquery判断输入密码两次是否相等

    在EasyUI的表单验证中,可以利用validType属性来设置特定的验证规则,比如判断两个密码输入框内容是否一致。在HTML中,只需要为确认密码的输入框设置validType属性为"equalTo['#password']",其中"#password"是另一...

    jQuery EasyUi 验证功能实例解析

    EasyUi的验证功能不仅限于内置规则,还可以通过扩展`$.fn.validatebox.defaults.rules`来添加自定义验证规则。 ```javascript $.extend($.fn.validatebox.defaults.rules, { CHS: { validator: function(value) {...

Global site tag (gtag.js) - Google Analytics