<div> <form method="post" action="#"> <fieldset> <legend>使用JQuery插件validation来实现表单验证</legend> <p> <label for="username">姓名：</label> <input > <em>*</em> </p> <p> <label for="email">邮件：</label> <input > <em>*</em> </p> <p> <label for="url">网址：</label> <input ></p> <p> <label for="comment">评论：</label> <textarea ></textarea> <em>*</em> </p> <p><input type="submit"></p> </fieldset> </form> </div>
•JQuery代码如下：
<script> // $(function(){ // $("#vform").validation(); // }); $(function(){ $("#vform").validate({ rules:{ username: { required: true, minlength: 6 }, email: { required: true, email: true }, url: "url", comment: "required" } }); }); </script>
•注意：使用空格分隔验证字段
以上就是关于JQuery插件Validation的基础使用了。
国际化之中文化
•首先引入一个中文的信息验证库，这个我们可以在下载好的validation的lib包下找到。
<script src="https://www.jb51.net/messages_zh.js"></script>
•第二步就是在验证规则处添加message字段，然后输入自定义的中文信息。如下：
<script> // $(function(){ // $("#vform").validation(); // }); $(function(){ $("#vform").validate({ rules:{ username: { required: true, minlength: 6, messages: { required: '请输入姓名', minlength: '请至少输入6个字符' } }, email: { required: true, email: true, messages: { required: '请输入邮箱', email: '请检查您的邮箱格式！' } }, url: { url: true, messages: { url: '请检查网址的格式！' } }, comment: { required: true, messages: { required: '请输入评论！', } } } }); }); </script>
不知道怎么回事，我这段代码没有显示中文提示，大家发现了错误在哪里了吗？