zoukankan      html  css  js  c++  java
  • validate插件

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>validate插件</title>
        <script type="text/javascript" src="jquery-3.2.1.js"></script>
        <script type="text/javascript" src="jquery.validate.js"></script>
        <script type="text/javascript" src="messages_zh.js"></script>
        <script>
    
    $().ready(function() {
     $("#signupForm").validate({
            rules: {
              firstname: "required",
              lastname: "required",
              username: {
                required: true,
                minlength: 2
              },
              password: {
                required: true,
                minlength: 5
              },
              confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
              },
              email: {
                required: true,
                email: true
              },
         
              agree: "required"
            },
            messages: {
              firstname: "请输入您的名字",
              lastname: "请输入您的姓氏",
              username: {
                required: "请输入用户名",
                minlength: "用户名必需由两个字母组成"
              },
              password: {
                required: "请输入密码",
                minlength: "密码长度不能小于 5 个字母"
              },
              confirm_password: {
                required: "请输入密码",
                minlength: "密码长度不能小于 5 个字母",
                equalTo: "两次密码输入不一致"
              },
              email: "请输入一个正确的邮箱",
              agree: "请接受我们的声明",
              
            }
        });
    });
    </script>
    <style>
    .error{
        color:red;
    }
    </style>
    </head>
    <body>
    <form class="cmxform" id="signupForm" method="get" action="">
      <fieldset>
        <legend>验证完整的表单</legend>
        <p>
          <label for="firstname">名字</label>
          <input id="firstname" name="firstname" type="text">
        </p>
        <p>
          <label for="lastname">姓氏</label>
          <input id="lastname" name="lastname" type="text">
        </p>
        <p>
          <label for="username">用户名</label>
          <input id="username" name="username" type="text">
        </p>
        <p>
          <label for="password">密码</label>
          <input id="password" name="password" type="password">
        </p>
        <p>
          <label for="confirm_password">验证密码</label>
          <input id="confirm_password" name="confirm_password" type="password">
        </p>
        <p>
          <label for="email">Email</label>
          <input id="email" name="email" type="email">
        </p>
        <p>
          <label for="agree">请同意我们的声明</label>
          <input type="checkbox" class="checkbox" id="agree" name="agree">
        </p>
        <p>
          <input class="submit" type="submit" value="提交">
        </p>
      </fieldset>
    </form>
    </body>
    </html>
  • 相关阅读:
    在命令提示符中使用antlr
    Migrating to Rails 2.0.2
    从AJAX IN ACTION书中学用 RSS READER
    maple download url
    搜索
    发邀请在线RoR开发与部署环境www.heroku.com
    if can't use ruby in command line
    查询表中某字段有重复记录的个数
    WPF窗体自适应分辨率
    《思考,快与慢》
  • 原文地址:https://www.cnblogs.com/qfdy123/p/7756689.html
Copyright © 2011-2022 走看看