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