jQuery validate验证插件的使用

时间:2022-11-30 15:37:01

效果如下:

jQuery  validate验证插件的使用

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery validate验证插件的使用</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>
<style>
.error{
    color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
 
   
    <p>
      <label for="cname">姓名 (必需)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">邮箱 (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">链接 (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
 
</form>
</body>
</html>