(Jquery功能篇)easy UI 验证功能

来源：互联网发布：玄武区网络问政编辑：程序博客网时间：2024/04/28 17:42
截图展示：
源代码展示：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>esay_ui框架 验证功能</title><!--引入相关的资源文件（js）  --><!--Jquery 核心js 文件  --><script type="text/javascript" src="js/jquery-1.8.0.min.js"></script><!--easy _ui组件  --><script type="text/javascript" src="js/jquery.easyui.min.js"></script><!--引入相关资源文件(css)  --><!--esay_ui 的css  --><link rel="stylesheet" type="text/css" href="css/easyui.css"><!--easy_ui 验证框架 的css文件   --><link rel="stylesheet" type="text/css" href="css/validatebox.css"><script>function validate() {//获取Id为name的input的值  var name = document.getElementById("name").value;//alert("相关参数 ："+name);var password = document.getElementById("password").value;var repassword = document.getElementById("repassword").value;if (password != repassword) {document.getElementById("password").value = "";document.getElementById("repassword").value = "";alert("输入密码与密码确认不一致 ");return false;}var email = document.getElementById("email").value;if (email == null || email == "") {alert("请输入邮箱地址 ");return false;}//无法获取时间控件的值，待解决 (Easy UI的Bug问题)var birthday = document.getElementById("birthday").value;if (birthday == null || birthday == "") {alert("请输入正确生日日期  ");return false;}var phone = document.getElementById("phone").value;if (phone == null || phone == "") {alert("请输入正确电话号码   ");return false;}var url = document.getElementById("url").value;if (url == null || url == "") {alert("请输入正确的url");return false;}alert("验证数据成功 ，可以进行相关的异步请求了 ！");}</script></head><body><div class="easyui-panel" title="Register"style="width: 400px; padding: 10px"><table><tr><td>r用户名:</td><!--数据要求：必须输入，（默认是字符）字符长度（3，10），class='easyui-validatebox'表示验证 --><td><input class="easyui-validatebox"data-options="required:true,validType:'length[3,10]'" id="name"></td></tr><tr><td>密码:</td><!--数据要求：必须输入，（默认是字符）字符长度（3，10），class='easyui-validatebox'表示验证 --><td><input class="easyui-validatebox" type="password"data-options="required:true,validType:'length[3,10]'"id="password"></td></tr><tr><td>密码确认:</td><!--数据要求：必须输入，（默认是字符）字符长度（3，10），class='easyui-validatebox'表示验证 --><td><input class="easyui-validatebox" type="password"data-options="required:true,validType:'length[3,10]'"id="repassword"></td></tr><tr><td>邮箱地址:</td><!--数据要求：必须输入，验证数据类型：邮箱类型  --><td><input class="easyui-validatebox"data-options="required:true,validType:'email'" id="email"></td></tr><tr><td>生日日期:</td><td><input class="easyui-datebox" id="birthday"></td></tr><tr><td>URL:</td><!--数据要求：必须输入，验证数据类型：URL类型  --><td><input class="easyui-validatebox"data-options="required:true,validType:'url'" id="url"></td></tr><tr><td>电话号码:</td><!--数据要求：必须输入，验证数据类型：电话类型  --><td><input class="easyui-validatebox" data-options="required:true"id="phone"></td></tr></table></div><input type="submit" value="验证" onclick="validate()"></body></html>