用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

jquery.validate.js 验证表单字段 用户名 邮箱......

2013-03-23 作者: 小蜜锋举报

[javascript]代码库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title></title>
  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript">
</script>
  <script src="lib/jquery.validate.js" type="text/javascript">
</script>
  <style type="text/css">
/*<![CDATA[*/
  * { font-family: Verdana; font-size: 96%; }
  label { width: 10em; float: left; }
  label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
  p { clear: both; }
  .submit { margin-left: 12em; }

  em { font-weight: bold; padding-right: 1em; vertical-align: top; }
  em.error {
  background:url("images/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;
  }
  em.success {
  background:url("images/checked.gif") no-repeat 0px 0px;
  padding-left: 16px;
  }

  /*]]>*/
  </style>
  <script type="text/javascript">
//<![CDATA[
  $(document).ready(function(){

        //自定义一个验证方法
        $.validator.addMethod(
        "formula", //验证方法名称
        function(value, element, param) {//验证规则
                return value == eval(param);
        }, 
        '请正确输入数学公式计算后的结果'//验证提示信息
        );

        $("#commentForm").validate({
                rules: {
                        username: {
                                required: true,
                                minlength: 2
                        },
                        email: {
                                required: true,
                                email: true
                        },
                        url:"url",
                        comment: "required",
                        valcode: {
                                formula: "7+9"  
                        }
                },
                
                messages: {
                        username: {
                                required: '请输入姓名',
                                minlength: '请至少输入两个字符'
                        },
                        email: {
                                required: '请输入电子邮件',
                                email: '请检查电子邮件的格式'
                        },
                        url: '请检查网址的格式',
                        comment: '请输入您的评论'
                },      
                
                errorElement: "em",                             //用来创建错误提示信息标签
                success: function(label) {                      //验证成功后的执行的回调函数
                        //label指向上面那个错误提示信息标签em
                        label.text(" ")                         //清空错误提示消息
                                .addClass("success");   //加上自定义的success类
                }


          });

  });
  //]]>
  </script>
</head>

<body>
  <form class="cmxform" id="commentForm" method="get" action="">
    <fieldset>
      <legend>一个简单的验证带验证提示的评论例子</legend>

      <p><label for="cusername">姓名</label> <em>*</em><input id="cusername" name="username" size="25" /></p>

      <p><label for="cemail">电子邮件</label> <em>*</em><input id="cemail" name="email" size="25" /></p>

      <p><label for="curl">网址</label> <input id="curl" name="url" size="25" value="" /></p>

      <p><label for="ccomment">你的评论</label> <em>*</em>
      <textarea id="ccomment" name="comment" cols="22">
</textarea></p>

      <p><label for="cvalcode">验证码</label> <input id="cvalcode" name="valcode" size="25" value="" />=7+9</p>

      <p><input class="submit" type="submit" value="提交" /></p>
    </fieldset>
  </form>
</body>
</html>

[代码运行效果截图]


jquery.validate.js 验证表单字段 用户名 邮箱......

[源代码打包下载]




网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...