使用jquery1.2.6验证用户登录和注册总结

使用jquery1.2.6验证用户登录和注册总结

一。导入js文件

<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script src="js/cmxforms.js" type="text/javascript"></script>

<script type="text/javascript">

$().ready(function() {
 // validate the comment form when it is submitted
 $("#commentForm").validate();
 
 // validate signup form on keyup and submit
 $("#signupForm").validate({
  rules: {
   firstname: "required",
   lastname: "required",
   username: {
    required: true,
    minlength: 2
   },
   password: {
    required: true,
    minlength: 6
   },
   confirm_password: {
    required: true,
    minlength: 6,
    equalTo: "#password"
   },
   email: {
    required: true,
    email: true
   },
   topic: {
    required: "#newsletter:checked",
    minlength: 2
   },
   agree: "required"
  },
  messages: {
   firstname: "Please enter your firstname",
   lastname: "Please enter your lastname",
   username: {
    required: "请输入用户名",
    minlength: "用户名至少俩个字符"
   },
   password: {
    required: "请输入密码",
    minlength: "密码至少六个字符"
   },
   confirm_password: {
    required: "请输入确认密码",
    minlength: "确认密码至少六个字符",
    equalTo: "确认密码必须和密码保持一致"
   },
   email: "请输入正确的电子邮箱",
   agree: "请先同意网站注册协议"
  }
 });
 
 // propose username by combining first- and lastname
 $("#username").focus(function() {
  var firstname = $("#firstname").val();
  var lastname = $("#lastname").val();
  if(firstname && lastname && !this.value) {
   this.value = firstname + "." + lastname;
  }
 });
 
 //code to hide topic selection, disable for demo
 var newsletter = $("#newsletter");
 // newsletter topics are optional, hide at first
 var inital = newsletter.is(":checked");
 var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
 var topicInputs = topics.find("input").attr("disabled", !inital);
 // show when newsletter is checked
 newsletter.click(function() {
  topics[this.checked ? "removeClass" : "addClass"]("gray");
  topicInputs.attr("disabled", !this.checked);
 });
});
</script>

<style type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
 margin-left: 10px;
 width: auto;
 display: inline;
}
#newsletter_topics label.error {
 display: none;
 margin-left: 103px;
}
    .style1
    {
        width: 19%;
    }
</style>

 

 

二  html中的form

  <form  id="signupForm" method="post" action="Buy/doRegister.aspx">
 <fieldset>
  <legend>会员注册</legend>
                        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="bkuang">
                        <tr>
                          <td><table width="100%" border="0" cellspacing="10" cellpadding="0">
                              <tr>
                                <td align="right" class="style1"><span class="STYLE25">&nbsp;<span class="STYLE24">*</span></span> <span class="STYLE25"><label for="username">用户名：</label></span></td>
                                <td width="88%" height="25"><input id="username" name="username" /></td>
                              </tr>
                              <tr>
                                <td align="right" class="style1"><span class="STYLE25">&nbsp;<span class="STYLE24">*</span> <label for="password">密码：</label></span></td>
                                <td><input id="password" name="password" type="password" /></td>
                              </tr>
                              <tr>
                                <td align="right" class="style1"><span class="STYLE25">&nbsp;<span class="STYLE24">*</span> <label for="confirm_password">确认密码：</label></span></td>
                                <td><input id="confirm_password" name="confirm_password" type="password" /></td>
                              </tr>
                              <tr>
                                <td align="right" class="style1"><span class="STYLE25">&nbsp;<span class="STYLE24">*</span> <label for="email">电子邮箱：</label></span></td>
                                <td><input id="email" name="email" /></td>
                              </tr>
<!--                              <tr>
                                <td align="right"><span class="STYLE25">&nbsp;<span class="STYLE24">*</span> 验证码：</span></td>
                                <td><input name="textfield5" type="text" class="bkuang_001" size="6" /></td>
                              </tr>-->
                              <tr>
                                <td class="style1">&nbsp;</td>
                                <td><input type="checkbox" id="agree" name="agree" />
                                <label for="agree">我已阅读并同意&nbsp;</label>
                                  <a href="huiyuanzhuce.html" target="_blank">会员注册协议</a> &nbsp;和&nbsp;<a href="yinsizhengce.html" target="_blank"> 隐私保护政策</a>&nbsp;。 </td>
                              </tr>
                              <tr>
                                <td class="style1">&nbsp;</td>
                                <td><input class="submit" type="submit" value="Submit"/> </td>
                              </tr>
                          </table></td>
                        </tr>
                      </table>

 </fieldset>
</form>

 

三 需要的js文件可以网上下载，也可以发到我的邮箱809208486@qq.com