使用 validate 进行输入验证
2024-09-07 05:52:25
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>
最新文章
- 记录一次MongoDB3.0.6版本wiredtiger与MMAPv1引擎的写入耗时对比
- [Linux] Linux指令汇总(持续更新中...)
- 【原创】三分钟教你学会MVC框架——基于java web开发(1)
- sys.sysprocesses视图的使用小结
- jQuery : eq() vs get()
- 手机端js模拟长按事件(代码仿照jQuery)
- BeagleBone Black&ndash; 智能家居控制系统 LAS - ESP8266 UDP 服务
- 【Delphi】圆角窗体
- google login page
- nodeJs基础
- ie7,IE8不支持document.getElmentsByClassName的问题
- BNU Online Judge-34777-Magical GCD
- javascript闭包的妙用——实现函数的重载
- cinder块存储 后端采用lvm、nfs安装配置
- MongoDB-BSON
- 考前停课集训 Day2 非
- ida6.8 android so调试
- 清明 DAY2
- day 06云计算的三种服务模式:IaaS,PaaS和SaaS
- 纯css实现网络图标