jquery实践案例--验证电子邮箱
<input type="email" name="email" id="email" value="" onpaste="return false"/>
我们来看看都有哪些邮箱:
我们如果一个个的邮箱进行判断,显然是不可能的了。
—个完整的Internet邮件地址由以下两个部分组成,格式如下:登录名@主机名.域名
中间用—个表示“在”(at)的符号“@”分开,符号的左边是对方的登录名,右边是完整的主机名,它由主机名与域名 组成。其中,域名由几部分组成,每一部分称为一个子域(Subdomain),各子域之间用圆点“.”隔开,每个子域都会告诉用户一些有关这台邮件服务器 的信息。
关键验证的正则表达式: var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
校验输入框:
//验证邮箱 function vailEmail(){ var email = jQuery("#email").val(); var flag = false; var message = ""; var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; if(email ==''){ message = "邮箱不能为空!"; }else if(!myreg.test(email)){ message = "请输入有效的邮箱地址!"; }else if(checkEmailIsExist()){ message = "该邮箱地址已经被注册!"; }else{ flag = true; } if(!flag){
//错误提示 //jQuery("#emailDiv").removeClass().addClass("ui-form-item has-error"); // jQuery("#emailP").html(""); //jQuery("#emailP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#email").focus(); }else{
//正确提示 //jQuery("#emailDiv").removeClass().addClass("ui-form-item has-success"); //jQuery("#emailP").html(""); //jQuery("#emailP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该邮箱可用"); } return flag; }
写一个方法来验证一下
//验证邮箱是否存在 function checkEmailIsExist(){ var email = jQuery("#email").val(); var flag = false; jQuery.ajax( { url: "checkEmail?t=" + (new Date()).getTime(), data:{email:email}, dataType:"json", type:"GET", async:false, success:function(data) { var status = data.status; if(status == "1"){ flag = true; } } }); return flag; }
后台处理程序:
@RequestMapping(value = "/checkEmail", method = RequestMethod.GET) public void checkEmail(HttpServletRequest request,HttpServletResponse response) { Map<String, Object> map = new HashMap<String, Object>(); try { String email = request.getParameter("email"); String status = "0"; //写查询语句,查询表里面是否存在该邮箱
//UserBaseInfo userBaseInfo = userService.findUserByEmail(email);
//if(userBaseInfo!=null)status="1"; map.put("status", status); String data = JSONObject.fromObject(map).toString(); response.getWriter().print(data); response.getWriter().flush(); response.getWriter().close(); } catch (Exception ex) { } }
分类:
JQuery
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?