继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jquery表单验证

英明神武的牛
关注TA
已关注
手记 317
粉丝 30
获赞 175


首先,导入jquery框架包

然后,布局表单

<form name="form1" action="" method="post">            <dl>                <dt><span>账号:</span><input type="text" name="member_code" id="member_code" class="input0"><label class="red" id="member_code_red"></label></dt>                <dt><span>密码:</span><input type="password" name="member_password" id="member_password" class="input0"><label class="red" id="member_password_red"></label></dt>                <dt><span>确认密码:</span><input type="password" name="password_confirm" id="password_confirm" class="input0"><label class="red" id="password_confirm_red"></label></dt>                <dt><span>手机:</span><input type="text" name="member_tel"  id="member_tel" class="input0"><label class="red" id="member_tel_red"></label></dt>                <dt><span>QQ:</span><input type="text" name="member_email_qq" id="member_email_qq" class="input0"><label class="red" id="member_email_qq_red"></label></dt>                <dt><span>EMAIL:</span><input type="text" name="member_email" id="member_email" class="input0"><label class="red" id="member_email_red"></label></dt>                <dt><span>性别:</span>&nbsp;&nbsp;女<input type="radio" name="member_sex" value="0" checked="checked">&nbsp;&nbsp;男<input type="radio" name="member_sex" value="1"><label class="red" id="member_sex_red"></label></dt>                <dt><span>会员类别:</span>&nbsp;&nbsp;类别1<input type="radio" name="member_group" value="2"checked="checked">&nbsp;&nbsp类别2<input type="radio" name="member_group" value="1"><label class="red"></label></dt>                <dt><span>推荐人:</span><input type="text" name="member_recommanded_member_id" class="input0" readonly='true'></dt>                <dt><span></span><input type="submit" name="submit" class="formsubmit"><label class="red"></label></dt>                <dt><a href="">《服务协议》</a></dt>            </dl>            </form>


最后写调用事件jquery代码


<script type="text/javascript">//表单验证jquery$(document).ready(    function(){        //用户名验证        var temp=true;        $("#member_code").blur(            function(){                var member_code=$("#member_code").val();                var reg=/^[A-Za-z0-9]+$/;//正则表达式不能加引号                var leng=parseInt(member_code.replace(/\s/g,"").length);                                  if(leng<=0){                    $("#member_code_red").html("不能为空值");temp=false;                }else if(!reg.test(member_code)){                    $("#member_code_red").html("格式错误,应由字母和数字组成");temp=false;                }else{                    $("#member_code_red").html("<img src='__ROOT__/Tpl/{:C(DEFAULT_THEME)}/Static/images/status-1.gif'>");                }                              }        );        //密码验证        $("#member_password").blur(            function(){                var member_password=$("#member_password").val();                var leng=parseInt(member_password.replace(/\s/g,"").length);                if(leng<=0){                    $("#member_password_red").html("不能为空值");temp=false;                }else if(leng<6){                    $("#member_password_red").html("密码最少6位");temp=false;                }else{                    $("#member_password_red").html("<img src='__ROOT__/Tpl/{:C(DEFAULT_THEME)}/Static/images/status-1.gif'>");                }            }        );        //密码确认        $("#password_confirm").blur(            function(){                var member_password=$("#member_password").val();                var password_confirm=$("#password_confirm").val();                var leng=parseInt(password_confirm.replace(/\s/g,"").length);                if(leng<=0){                    $("#password_confirm_red").html("不能为空值");temp=false;                }else if(member_password==password_confirm){                    $("#password_confirm_red").html("<img src='__ROOT__/Tpl/{:C(DEFAULT_THEME)}/Static/images/status-1.gif'>");                }else{                    $("#password_confirm_red").html("两次输入密码不一致");temp=false;                }            }        );        //手机号验证        $("#member_tel").blur(            function(){                var member_tel=$("#member_tel").val();                var reg=/^[1][358][0-9]{9}$/;                var leng=parseInt(member_tel.replace(/\s/g,"").length);                if(leng<=0){                    $("#member_tel_red").html("不能为空值");temp=false;                }else if(!reg.test(member_tel)){                    $("#member_tel_red").html("格式错误,请输入正确的手机号");temp=false;                }else{                    $("#member_tel_red").html("<img src='__ROOT__/Tpl/{:C(DEFAULT_THEME)}/Static/images/status-1.gif'>");                }            }        );        //QQ号验证        $("#member_email_qq").blur(            function(){                var member_email_qq=$("#member_email_qq").val();                var reg=/^\d{5,10}$/;                var leng=parseInt(member_email_qq.replace(/\s/g,"").length);                if(leng<=0){                    $("#member_email_qq_red").html("不能为空值");temp=false;                }else if(!reg.test(member_email_qq)){                    $("#member_email_qq_red").html("格式错误,请输入正确的QQ号");temp=false;                }else{                    $("#member_email_qq_red").html("<img src='__ROOT__/Tpl/{:C(DEFAULT_THEME)}/Static/images/status-1.gif'>");                }            }        );        //邮箱验证        $("#member_email").blur(            function(){                var member_email=$("#member_email").val();                var reg=/^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/;                var leng=parseInt(member_email.replace(/\s/g,"").length);                if(leng<=0){                    $("#member_email_red").html("不能为空值");temp=false;                }else if(!reg.test(member_email)){                    $("#member_email_red").html("格式错误,请输入正确的邮箱");temp=false;                }else{                    $("#member_email_red").html("<img src='__ROOT__/Tpl/{:C(DEFAULT_THEME)}/Static/images/status-1.gif'>");                }            }        );        //表单提交        $("#form").submit(            function(){                                  $("#member_code").blur();                $("#member_password").blur();                $("#password_confirm").blur();                $("#member_tel").blur();                $("#member_email_qq").blur();                $("#member_email").blur();                var length=parseInt($("#member_code_red").text().length)+                            parseInt($("#member_password_red").text().length)+                            parseInt($("#password_confirm_red").text().length)+                            parseInt($("#member_tel_red").text().length)+                            parseInt($("#member_email_qq_red").text().length)+                            parseInt($("#member_email_red").text().length);                if(length>0){return false;}            }        );              });</script>


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP