jQuery Validate自定义表单元素验证通过和不通过的样式

最新推荐文章于 2022-11-15 19:36:15 发布

风神.NET跨平台

最新推荐文章于 2022-11-15 19:36:15 发布

阅读量569

点赞数

分类专栏： Jquery及其组件

原文链接：https://blog.csdn.net/WuLex

版权

Jquery及其组件专栏收录该内容

147 篇文章 3 订阅

订阅专栏

在jQuery Validate自定义错误信息的样式一章节介绍了如何设置错误信息的样式。

下面介绍一下如何自定义对应表单元素通过验证和没有通过验证的样式信息。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#thetable { 
  font-size:12px; 
} 
#thetable td { 
  width:40px; 
  height:30px; 
  line-height:30px; 
  text-align:center; 
}
#thetable tr > td:nth-of-type(3) {
  width:120px;
  text-align:left;
}
span.error {
  color:red
}
input.error {
  border:1px dotted red;
}
input.success {
  background:#ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#myform").validate({
    errorClass: "error",
    validClass:"success",
    errorElement: "span",
    wrapper: "li",
    errorLabelContainer: $("#ant ul"),
    errorContainer: $("#ant"),
    rules: {
      username: "required",
      pw: "required",
      email: {
        required: true,
        email:true
      }
    },
    messages: {
      name: "用户名是必填项目",
      pw: "密码是必填项目",
      email: {
        required: "邮箱是必填项目",
        email:"邮箱格式不正确"
      }
    }
  });
});
</script>
</head>
<body>
<div id="ant">
  <ul></ul>
</div>
<form id="myform">
<table id="thetable">
  <tr>
    <td>姓名:</td> 
    <td><input type="text" name="username"/></td>
    <td></td>
  </tr>
  <tr>
    <td>密码:</td>
    <td><input type="password" name="pw" /></td>
    <td></td>
  </tr>
  <tr>
    <td>邮箱:</td>
    <td><input type="text" name="email"/></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3">
      <input type="submit" value="提交">
      <input type="reset" value="重置">
    </td>
  </tr>
</table>
</form>
</body>
</html>

上面的代码演示了我们的要求，下面对实现原理做一下简单介绍。

（1）.errorClass定义的样式类用于验证失败的表单元素和errorElement规定的错误信息容器元素。

（2）.validClass定义的样式类用于验证成功的表单元素。

特别说明:errorClass定义的样式类会被同时添加到表单元素和对应的errorElement规定的错误信息容器元素。

所以css代码最好使用如下形式:

span.error {
  color:red
}
input.error {
  border:1px dotted red;
}

尽量避免使用如下方式:

.error {
  color:red
}
.error {
  border:1px dotted red;
}

风神.NET跨平台

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery Validate自定义表单元素验证通过和不通过的样式

在jQuery Validate自定义错误信息的样式一章节介绍了如何设置错误信息的样式。下面介绍一下如何自定义对应表单元素通过验证和没有通过验证的样式信息。代码实例如下:<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="htt...
复制链接

扫一扫