2012年11月7日 星期三

JQuery validate 表單驗證




<form action="" method="post" id="login">
        <label>用户名:</label><input name="username" type="text" />
        <label>邮件地址:</label><input name="email" type="text" />
        <label>密   码:</label><input  id="password" name="password" type="password"  />
        <label>确认密码:</label><input name="confirm_password" type="password" />
        <input name="userinfosub" type="submit" value="提交" />
    </form>
然后引入下面这四个js文件:
<script src="../js/jquery.js" type="text/网页特效"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>
<script src="./js/messages_cn.js" type="text/javascript"></script>
然后自定义一个js文件,这个js文件的内容如下:
$("#login").validate({
    rules: {
       username: {
        required: true,
        minlength: 2
       },
       email: {
        required: true,
        email: true
       },
       password: {
        required: true,
        minlength: 6
       },
       confirm_password: {
        required: true,
        minlength: 6,
        equalto: "#password"
       }
      },
    messages: {
       username: {
        required: "<span style='color:red'>  请输入用户名</span>",
        minlength: jquery.format("<span style='color:red'>  用户名不正确,应该在2个汉字或四个字符以上</span>")
       },
       email: {
        required: "<span style='color:red''>请输入email地址</span>",
        email: "<span style='color:red'>  请输入正确的email地址</span>"
       },
       password: {
        required: "<span style='color:red'>  请输入密码</span>",
        minlength: jquery.format("<span style='color:red'>  您输入的密码不正确,应该在6位或6位字符以上</span>")
       },
       confirm_password: {
        required: "<span style='color:red'>请输入确认密码</span>",
        minlength: jquery.format("<span style='color:red'>  您输入的密码不正确,应该在6位或6位字符以上</span>"),
        equalto: "<span class='fred'>两次输入密码不一致</span>"
       }
      }
    });

0 意見:

張貼留言

 

MangoHost Copyright © 2009 Cookiez is Designed by Ipietoon for Free Blogger Template