jQuery易用户界面之验证框validatebox实例详解

1.样式

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合表单（表单)插件并防止表单重复提交。

2.练习1:验证输入字符长度及非空

！DOCTYPE html html head meta charset=' UTF-8 '标题验证框/标题！-引入钢性铸铁文件- link rel='样式表href='主题/默认/easyui . CSS“rel=”外部nofollow' rel='外部nofollow' rel='外部no follow ' type=' text/CSS '/link link rel='样式表href='主题/icon . CSS“rel=”外部nofollow' rel='外部nofollow' rel='外部没有follow ' type=' text/CSS '/链接！-引入射流研究…文件-脚本类型=' text/JAVAScript ' src=' http : js/jquery。量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : js/jquery。苏西。量滴js /脚本类型=' text/JAVAScript ' src=' http : js/resui-lang-zh _ cn。js /脚本/头体姓名：输入id=' validateboxID '/p//正文脚本类型=' text/JavaScript ' $(' # validateboxID ').验证框({必需的d : true，验证类型：['长度[1，6]'，'闻仲']});/script /html结果：

3.练习2:自定义规则作为输入框验证规则

！DOCTYPE html html head meta charset=' UTF-8 '标题验证框/标题！-引入钢性铸铁文件- link rel='样式表href='主题/默认/easyui . CSS“rel=”外部nofollow' rel='外部nofollow' rel='外部no follow ' type=' text/CSS '/link link rel='样式表href='主题/icon . CSS“rel=”外部nofollow' rel='外部nofollow' rel='外部没有跟随' type=' text/CSS '/链接！-引入射流研究…文件-脚本类型=' text/JAVAScript ' src=' http : js/jquery。量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : js/jquery。苏西。量滴js /脚本类型=' text/JAVAScript ' src=' http : js/resui-lang-zh _ cn。js /脚本/头体姓名：输入id='validateboxID'/p/！-邮箱：输入id='emailID'/p/密码：输入id='passwordID'/p/- /body脚本类型=' text/JavaScript ' $(' # validateboxID ').验证框({必需的d : true，验证类型：['长度[1，6]'，'闻仲']});$.扩展($。fn。验证框。默认值。规则，{文茜： {验证器：函数(值){//如果符合中文if(/^[\u3220-\uFA29]*$/.测试(值)){ 0返回true} }，//如果不符合中文，以下就是提示信息消息： '姓名必须全为中文' } });/script /html结果：

4.练习3:验证邮箱

！DOCTYPE html html head meta charset=' UTF-8 '标题验证框/标题！-引入钢性铸铁文件- link rel='样式表href='主题/默认/easyui . CSS“rel=”外部nofollow' rel='外部nofollow' rel='外部no follow ' type=' text/CSS '/link link rel='样式表href='主题/icon . CSS“rel=”外部nofollow' rel='外部nofollow' rel='外部没有follow ' type=' text/CSS '/链接！-引入射流研究…文件-脚本类型=' text/JAVAScript ' src=' http : js/jquery。量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : js/jquery。苏西。量滴js /脚本类型=' text/JAVAScript ' src=' http : js/resui-lang-zh _ cn。js /脚本/头体邮箱：输入id=' Emailid '/p//正文脚本类型='text/javascript' $('#emailID ').validate box({必需的d : true，validType:['length[1，30]'，' email ']})；/script /html结果：

5.文档

以上所述是小编给大家介绍的jQuery易用户界面之验证框validatebox实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！