jquery实现注册验证
来源:互联网 发布:linux安装php环境 编辑:程序博客网 时间:2024/05/16 04:20
简单实现了 验证邮箱格式是否正确,两次输入密码是否一致的功能。每次当鼠标聚焦到其他地方的时候,对当前正在输入的文本框进行验证代码中已经有很多注释了,所以就直接贴代码了。</p>jquery代码$(document).ready(function(){//类是required的在末尾都加上*标示$("form :input.required").each(function(){ var $required = $("<strong class='high'> *</strong>"); //创建元素 $(this).parent().append($required); //然后将它追加到文档中 });//失去焦点的时候,进行判断输入的内容正不正确$(".int :input").blur(function(){var $parent = $(this).parent();//每次判断的时候 将 之前添加到末尾的提示信息删除$parent.find(".formtips").remove();//获取 输入框中的值var value = $(this).val();var errorMsg ="";var okMsg = "";//当邮箱框失去焦点的时候 判断邮箱格式是否正确if($(this).is("#email") ){if( value=="" || (value !="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(value) )){errorMsg = '请输入正确的Email地址.'; }else{ okMsg = '输入正确.'; }}else if($(this).is("#password") ){if( value==""){errorMsg = '请输入密码';}else{okMsg = '输入正确';}}else if( $(this).is("#cpassword") ){var password = $("#password").val();if( password != value){errorMsg = "密码不一致";}else{okMsg = "输入正确";}}if(errorMsg != ""){$parent.append('<span class="formtips onError">'+errorMsg+'</span>');}else {$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');}});//提交验证var $cr = $("#cr");$("#send").click(function(){//勾选条款后,才能提交if( !$cr.is(":checked")){alert("请同意相关条款后,在提交!");return false;}//如果表单中有onError类,表示某些框的信息不符合要求var numError = $('form .onError').length; if(numError){alert("某些文本框输入内容不正确"); return false; } }); //重置 $('#res').click(function(){ $(".formtips").remove(); });})</script>HTML代码
<form method="post" action=""> <div class="int"> <label for="email">邮箱:</label> <input type="text" id="email" class="required" /> </div><div class="int"> <label for="password">密码:</label> <!-- 为每个需要的元素添加required --> <input type="password" id="password" class="required" /> </div><div class="int"> <label for="cpassword">确认密码:</label> <!-- 为每个需要的元素添加required --> <input type="password" id="cpassword" class="required" /> </div><div > <input type="checkbox" value="1" id="cr" /><label for="cr">同意相关条款</label> </div> <div class="sub"> <input type="submit" value="提交" id="send"/><input type="reset" id="res"/> </div></form>
0 0
- jquery实现注册验证
- jQuery实现登录注册验证
- jquery实现注册表单验证
- jQuery实现用户注册的表单验证
- jQuery实现用户注册的表单验证
- JQuery实现表单验证(注册页面)
- jquery 注册验证,
- jquery 注册验证用户名
- jquery 注册验证
- jquery.valid 注册验证
- JQuery验证 [注册]
- 注册js/jquery验证
- 用户注册jquery验证
- Jquery 验证注册
- jquery ajax验证注册
- jQuery 前台注册验证!
- jquery 注册验证
- Jquery 注册验证
- 装饰模式
- Android 下的EXIF
- iOS学习之UI
- Android 友盟分享躺过的几个坑,大坑,坑爹
- redis 多租户概念的个人理解
- jquery实现注册验证
- UIScrollView(滑动视图)
- Swift中NSJSONSerialization类抛出异常的处理写法
- Android.mk 文件语法指南
- Java实现十进制数转化为二进制数的算法
- The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
- C库函数-----sin()
- 心血来潮 写一篇关于python list 的用法
- ASP.NET简介