使用 validate 进行输入验证

来源：互联网发布：ubuntu 14.04 阿里源编辑：程序博客网时间：2024/05/16 12:23

validate 官方教程网址：

http://www.runoob.com/jquery/jquery-plugin-validate.html

在表单页面引入两个核心 js 文件

#官方的两个文件<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>#参考官方封装的一个 js 文件<script src="http://www.***.com/assets/validate/msg.js"></script>

msg.js 代码如下：

$.extend($.validator.messages, {        required: "<b style='color:red;font-size: 16px;'>＊ 这是必填字段</b>",        remote: "<b style='color:red;font-size: 16px;'>＊ 请修正此字段</b>",        email: "<b style='color:red;font-size: 16px;'>＊ 请输入有效的电子邮件地址</b>",        url: "<b style='color:red;font-size: 16px;'>＊ 请输入有效的网址</b>",        date: "<b style='color:red;font-size: 16px;'>＊ 请输入有效的日期</b>",        dateISO: "<b style='color:red;font-size: 16px;'>＊ 请输入有效的日期 (YYYY-MM-DD)</b>",        number: "<b style='color:red;font-size: 16px;'>＊ 请输入有效的数字</b>",        digits: "<b style='color:red;font-size: 16px;'>＊ 只能输入正整数或0</b>",        creditcard: "<b style='color:red;font-size: 16px;'>＊ 请输入有效的信用卡号码</b>",        equalTo: "<b style='color:red;font-size: 16px;'>＊ 你的输入不相同</b>",        extension: "<b style='color:red;font-size: 16px;'>＊ 请输入有效的后缀</b>",        maxlength: $.validator.format("<b style='color:red;font-size: 16px;'>＊ 最多可以输入 {0} 个字符</b>"),        minlength: $.validator.format("<b style='color:red;font-size: 16px;'>＊ 最少要输入 {0} 个字符</b>"),        rangelength: $.validator.format("<b style='color:red;font-size: 16px;'>＊ 请输入长度在 {0} 到 {1} 之间的字符串</b>"),        range: $.validator.format("<b style='color:red;font-size: 16px;'>＊ 请输入范围在 {0} 到 {1} 之间的数值</b>"),        max: $.validator.format("<b style='color:red;font-size: 16px;'>＊ 请输入不大于 {0} 的数值</b>"),        min: $.validator.format("<b style='color:red;font-size: 16px;'>＊ 请输入不小于 {0} 的数值</b>")});$.validator.setDefaults({    submitHandler: function() {        return true;    }});$().ready(function() {    $("#signupForm").validate();});

使用方式：

//上面我们引入了三个 js 文件。//给 form 表单命名个 id 为 signupForm。//根据 msg.js 里面的提示，不要求范围的直接 属性='true'，就能调用验证。<form id="signupForm" action="" method="post">   <p>      <input required="true"  rangelength="1,15" type="text" />   </p>    </form>

0 0