视频

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .error {
      color: #F00;
    }
  </style>
</head>
<body>
<!--
    required: "This field is required.",
		remote: "Please fix this field.",
		email: "Please enter a valid email address.",
		url: "Please enter a valid URL.",
		date: "Please enter a valid date.",
		dateISO: "Please enter a valid date ( ISO ).",
		number: "Please enter a valid number.",
		digits: "Please enter only digits.",
		equalTo: "Please enter the same value again.",
		maxlength: $.validator.format( "Please enter no more than {0} characters." ),
		minlength: $.validator.format( "Please enter at least {0} characters." ),
		rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
		range: $.validator.format( "Please enter a value between {0} and {1}." ),
		max: $.validator.format( "Please enter a value less than or equal to {0}." ),
		min: $.validator.format( "Please enter a value greater than or equal to {0}." ),
		step: $.validator.format( "Please enter a multiple of {0}." )
-->
<form id="myForm" action="xxx">
  <!-- action表单提交目标地址 -->
  <p>用户名(必须的, 最小2位): <input name="name" type="text" required minlength="2"></p>
  <p>密码(必须的, 6到8位): <input id="password" name="pwd" type="password" required minlength="6" maxlength="8"></p>
  <p>确认密码(与密码相同): <input name="pwd2" type="password" equalTo="#password"></p>
  <input class="submit" type="submit" value="提交">
</form>

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
  /*
  声明式验证:程序员只需要声明规则,可以自定义验证错误信息
   */
  $(function () {
    $('#myForm').validate({
      // 冒号前面对应name的值
      messages: {
        name: {
          required: '用户名是必须的',
          minlength: '用户名的最小长度是2'
        },
        pwd: {
          required: '密码是必须的',
          minlength: '密码的最小长度是6',
          maxlength: '密码的最大长度是8'
        },
        pwd2: {
          equalTo: '确认密码必须与密码相同'
        }
      }
    })
  })
</script>
</body>
</html>

版权声明:本文为垂序葎草原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/chuixulvcao/p/17058609.html