jQuery Validate前端验证
2024-09-06 16:33:51
我们经常看到如下效果,那么它是如何实现的呢?看下面:
废话少说,直接上代码,大家直接Copy就能看到上面的效果啦。
<html>
<head>
<title>验证内容</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>
$(function(){ $("#signupForm").validate({
rules:{
firstName:"required",
lastName:{required:true,maxlength:}
},
message:{
firstName:"请输入您的姓名",
lastName:{required:"请输入您的姓氏",maxlength:"输入的字符个数超限"}
}
})
}) </script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form id="signupForm">
<fieldset>
<legend>验证完整的表单</legend>
<p>
<label for="firstName">名字</label>
<input id="firstName" name="firstName" type="text">
</p>
<p>
<label for="lastName">姓氏</label>
<input id="lastName" name="lastName" type="text">
</p>
<p>
<input type="submit" class="submit" value="提交"/>
</p> </fieldset>
</form>
</body>
</html>
详细学习可参考: http://www.runoob.com/jquery/jquery-plugin-validate.html
最新文章
- Mac卸载MySQL
- 关于mirai病毒的一些研究
- AS-demo09
- AngularJS开发下一代Web应用笔记(一)
- NSMakeRange基础函数应用
- 推荐几个对Asp.Net开发者比较实用的工具
- 记npm包开发全过程
- Hibernate annotation多对多配置
- jquery解决onmouseover和onmouseout合用的bug问题
- uva 11396Claw Decomposotion(二分图判定)
- LeetCode OJ 209. Minimum Size Subarray Sum
- cmstop中实例化controller_admin_content类传递$this,其构造方法中接收到的是--名为cmstop的参数--包含cmstop中所有属性
- JS中都有哪些数据类型呢?
- jQuery ajax 与服务器交互方法
- 《Spring Cloud与Docker微服务架构实战》配套代码
- centos 网卡状态
- Scheme来实现八皇后问题(1)
- 什么是redis?redis有什么用途?
- 【读书笔记】iOS-配件
- 1090. Highest Price in Supply Chain (25)-dfs求层数
热门文章
- C# tostring(";0000000";)
- HTML input 控件
- brew 安装的.net 运行时提示";Did you mean to run dotnet SDK commands?";
- 后台导出大量数据超时报 nginx404错误
- MATLAB图形界面设计(下)
- vue 中引入Jquery插件
- WebLogic的服务搭建
- [luogu2317 HNOI2005] 星际贸易 (dp)
- [bzoj2044] 三维导弹拦截 (二分图最大匹配+dp)
- vue实现双向绑定mvvm