1、为什么要进行数据验证
- 前端验证:主要为了减轻服务端压力,提高用户体验。
- 后端验证:主要为了数据的安全性(不要相信用户输入的任何数据)
下载插件:
image.png
具体使用可以参考以下离线文档:
image.png
2、jquery-validate验证插件的使用
第一步:解压插件,引入核心的js文件到项目中,
注:要先引入jquery库。
image.png
第二步:构建基本表单,同时给form标签绑定一个id属性,值为theform(值可任意),
image.png
第三步:给表单元素定义验证规则,和对应规则不通过的提示信息
image.png
验证规则rules:
image.png
验证规则不通过的提示信息messages:
image.png
可以发现当某个元素每个验证不通过时,会自动在元素后面加一个label标签,且类名为error,那么通过此标签可以自定义错误的样式
image.png
样式:
image.png
效果:
image.png
3、实现自定义验证规则
当自己有特定的验证规则的时候,可以进行自定义规则验证:
实现自定义验证方法checkPid:
image.png
image.png
效果:
image.png