jQuery form validation plugins （摘录，挺受启发，备用）

最新推荐文章于 2024-10-21 09:17:12 发布

最新推荐文章于 2024-10-21 09:17:12 发布 · 205 阅读

文章标签：

本文介绍如何使用jQuery插件简化表单验证过程，包括加载必要JS文件、设置验证规则及自定义错误信息等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单验证一直是一个大问题，但是有了jquery，有了form validation plugins，一切就变得简单了。

点此查看官方说明文档

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
<title>Test for jQuery validate ( ) plugin</title>
<link rel= "stylesheet" type= "text/css" media= "screen" href= "css/screen.css" />
<script src= "js/jquery.js" type= "text/javascript"></script>
<script src= "js/cmxforms.js" type= "text/javascript"></script>
<script src= "js/jquery.metadata.js" type= "text/javascript"></script>
<script src= "js/jquery.validate.min.js" type= "text/javascript"></script>
<script type= "text/javascript">
$. meta. setType ( "attr", "validate" );
$. validator. setDefaults ( {
submitHandler: function ( ) { alert ( "submitted!" ); }
} );
$ ( ). ready ( function ( ) {
// validate the comment form when it is submitted
$ ( "#commentForm" ). validate ( {
messages: {
cname: "请输入用户名",
cemail: {
required: "电子邮件不能为空",
email: "电子邮件格式不正确"
},
curl: "URL格式不对",
ccomment: "留言不能为空"
}
} );
} );
</script>

先载入4个js文件，放心这四个文件都很小

这句话的意思是设置一个标签，然后在这个标签里，定义相关的属性，比如required,minLength等等

这个函数会在所有验证都通过时触发，提交表单。

这个是自定义错误信息，属性对应的是表单项的name，值对应的是当验证不通过时的错误信息。就这么简单，验证部分就做完了。

再来看看表单部分

<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages </legend>
<p>
<label for="cname">Name (required, at least 2 characters) </label>
<input id="cname" name="cname" class="some other styles " validate = "required:true,minLength:2" />
<div> </p> <p>
<label for="cemail">E-Mail (required) </label>
<input id="cemail" name="cemail" validate = "required:true,email:true" />
</p>
<p>
<label for="curl">URL (optional) </label>
<input id="curl" name="curl" validate = "url:true" value="" />
</p>
<p>
<label for="ccomment">Your comment (required) </label>
<textarea id="ccomment" name="ccomment" validate = "required:true"> </textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
<p>
<label for="spam_email">
<input type="checkbox" id="spam_email" value="email" name="spam" validate="required:true, minLength:2" />
Spam via E-Mail
</label>
<label for="spam_phone">
<input type="checkbox" id="spam_phone" value="phone" name="spam" />
Spam via Phone
</label>
<label for="spam_mail">
<input type="checkbox" id="spam_mail" value="mail" name="spam" />
Spam via Mail
</label>
<label for="spam" class="error">请至少选择两个选项 </label>
</p>
</fieldset>
</form>