jQuery EasyUI之验证框validatebox实例详解
网络编程 发布日期：2024/9/30 浏览次数：1
正在浏览：jQuery EasyUI之验证框validatebox实例详解
1.样式
validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。
2.练习1：验证输入字符长度及非空
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validatebox</title> <!-- 引入css文件 --> <link rel="stylesheet" href="themes/default/easyui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css"></link> <link rel="stylesheet" href="themes/icon.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css"></link> <!-- 引入js文件 --> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">结果：
3.练习2：自定义规则作为输入框验证规则
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validatebox</title> <!-- 引入css文件 --> <link rel="stylesheet" href="themes/default/easyui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css"></link> <link rel="stylesheet" href="themes/icon.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css"></link> <!-- 引入js文件 --> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">结果：
4.练习3：验证邮箱
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validatebox</title> <!-- 引入css文件 --> <link rel="stylesheet" href="themes/default/easyui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css"></link> <link rel="stylesheet" href="themes/icon.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css"></link> <!-- 引入js文件 --> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">结果：
5.文档
以上所述是小编给大家介绍的jQuery EasyUI之验证框validatebox实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
