jquery.validate验证样式怎么用css控制

发布网友 发布时间：2022-04-22 08:26

我来回答

共2个回答

懂视网 时间：2022-04-28 18:50

原理

表单元素中，有一个pattern属性，可以自定义正则表达式（如手机号、邮箱、身份证..）；valid伪类，可以匹配通过pattern验证的元素；invalid伪类则相反，可以匹配未通过pattern验证的元素。

（推荐教程：CSS入门教程）

html代码

布局很简单，input跟button是兄弟节点的关系，required属性是必填的意思，也就是输入的内容必须要验证通过；

<section class="container">
 <input type="text" name="tel" placeholder="请输入手机号码" pattern="^1[3456789]d{9}$" required><br>
 <input type="text" name="tel" placeholder="请输入验证码" pattern="d{4}" required><br>
 <button type="submit"></button>

css代码

这里用的是scss预处理器

input {
 // 验证通过时按钮的样式
 &:valid {
 &~button {
 pointer-events: all;
 cursor: pointer;
 &::after {
 content: "提交:+1:"
 }
 }
 }
 // 验证不通过时按钮的样式
 &:invalid {
 &~button {
 pointer-events: none; // 去除点击事件，让按钮无法点击
 &::after {
 content: "未通过验证:unamused:"
 }
 }
 }
}

相关视频教程推荐：css视频教程

热心网友 时间：2022-04-28 15:58

首先，jquery.validate是一个验证表单的方法，它主要的功能是为表单提供简单的表单提交的验证方法，比如必填项的提示、密码是否一致、邮箱格式等等；

基本的CSS样式的变化，即在<style></style>中根据id或者class来写格式控制；

表单验证中自带的一些css格式可以在谷歌浏览器中的开发模式中找到其对应的id或者class来修改，该图中验证提示词的id=cname-error；

对id=cname-error改变css，效果为第一行；注意到有一个.error的存在，它是对所有报错的样式进行控制；改完后color样式可能不能改成功，不妨在你的color后加一个！important。

如果不怕麻烦，可以去改导入的jquery.vliadate.js文件。