jquery-validation输出提示信息美化

最新推荐文章于 2022-11-09 11:33:59 发布

MRW456

最新推荐文章于 2022-11-09 11:33:59 发布

阅读量1.1w

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/MRW456/article/details/50408649

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先看看美化过的输出信息吧

1、完成页面的基本布局以及导入jquery-1.8.3.js和jquery.validate.min.js还有页面css文件(conhui.css),配置jquery validate的校验规则

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="./jquery-1.8.3.js"></script>
<script type="text/javascript" src="./jquery.validate.min.js"></script>
<link rel="stylesheet" type="text/css" href="./conhui.css"/>
<title></title>
<script type="text/javascript">
$(document).ready(function(){
   $("#student").validate({
       rules: {
           number:{required:true,number:true,minlength:10,maxlength:10},
           name:"required",
           sex: "required",
           cardnumber:{
               required:true,
               isIdCardNo:true
           },
           pass:{
               required:true,
               minlength:6,
               maxlength:20
           },
           npass:{
               required:true,
               equalTo: "#pass"
           }

       },
       messages: {
           number: {required:"请输入学号",number:"学号必须为数字",maxlength:"学号必须为10位",minlength:"学号必须为10位",remote:"用户名已存在"},
           name:"姓名不能为空",
           sex: "性别不能为空",
           cardnumber:{
               required:"身份证号码不能为空",
               isIdCardNo:"身份证号码输入错误"
           },
           pass:{
               required:"密码不能为空",
               minlength:"密码必须大于6位",
               maxlength:"密码必须小于20位"
           },
           npass:{
               required:"必须再次输入密码",
               equalTo: "密码输入不一致"
           }

       },
       // specifying a submitHandler prevents the default submit, good for the demo
       submitHandler: function() {
           $("#student").ajaxsubmit();
       }
   });
})
</script>
</head>
<body>
<div class="main">
<h1><small>学生注册个人信息</small></h1>
<form action="/Dority/StudentResgister?action=register" method="post" class="form form-horizontal" id="student" name="student">

    <div class="row cl">
      <label class="form-label col-2">学号:</label>
      <div class="formControls col-3">
       <input type="text" class="input-text" value="" placeholder="" id="number" name="number">
      </div>
      <div class="mblack"> </div>
     </div>
     <div class="row cl">
      <label class="form-label col-2">姓名:</label>
      <div class="formControls col-3">
       <input type="text" class="input-text" value="" placeholder="" id="name" name="name">
      </div>
      <div class="mblack"> </div>
     </div>
     <div class="row cl">
      <label class="form-label col-2 rad">性别:</label>
     <div class="formControls col-3">
               <input type="radio" name="sex" id="sex" value="1" style="margin-top:5px;" /><label style="margin-top:6px;margin-left:10px">男</label>
                <input type="radio" name="sex" id="sex" style="margin-top:5px;margin-left:25px;" value="2" /><label style="margin-top:6px;margin-left:10px;">女</label>
   </div>
      <div class="mblack"> </div>
     </div>
      <div class="row cl">
           <label class="form-label col-2"><span class="c-red">*</span>身份证号码:</label>
           <div class="formControls col-3">
               <input type="text" class="input-text" value="" placeholder="" id="cardnumber" name="cardnumber">
           </div>
           <div class="mblack"> </div>
       </div>
      <div class="row cl">
           <label class="form-label col-2"><span class="c-red">*</span>密码：</label>
           <div class="formControls col-3">
               <input type="password" autocomplete="off" value="" id="pass" name="pass" class="input-text" >
           </div>
           <div class="mblack"> </div>
       </div>
       <div class="row cl">
           <label class="form-label col-2"><span class="c-red">*</span>确认密码：</label>
           <div class="formControls col-3">
               <input type="password" autocomplete="off" class="input-text" id="npass" name="npass">
           </div>
           <div class="mblack"> </div>
       </div>
       <div class="row cl">
           <div class="col-9 col-offset-2">
               <input class="btn btn-primary radius" type="submit" value="  注册  ">
           </div>
       </div>
</form>
</div>
<div/>
</body>
</html>

这个时候还真是没法看不截图啦

2、改变输出元素的样式，在该页面中添加输出验证信息的css

3、当验证时将该样式输出到正确的位置，正确的时候显示正确的样式，错误的时候显示错误的样式，王上面的$("#student").validate中添加如下内容

        success:function(label){
           label.text(" ").addClass("checked"); //正确的时候输出的样式为checked
       },
       errorPlacement: function(error, element) {
           if (element.is(":radio"))
               error.appendTo(element.parent().next()); //如果元素色type为radio将错误的信息输出到该元素的父类元素的下一个元素中，就是我们上面的<div class="mblack"> </div>
           else if (element.is(":checkbox")) //如果元素色type为checkbox将错误的信息输出到该元素的父类元素的下一个元素中，就是我们上面的<div class="mblack"> </div>
               error.appendTo(element.next());
           else
               error.appendTo(element.parent().next());
       },
       highlight: function(element, errorClass) {
           $(element).parent().next().find("." + errorClass).removeClass("checked");//表单用户(获取到焦点)操作时如果正确就移除错误的css属性添加正确的css属性
       }

我这个也是从官方实例中学来的，大家多看看官方示例肯定会有很大的收获的

源码文件下载

MRW456

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jquery-validation输出提示信息美化

先看看美化过的输出信息吧1、完成页面的基本布局以及导入jquery-1.8.3.js和jquery.validate.min.js还有页面css文件(conhui.css),配置jquery validate的校验规则 $(document).ready(function(){ $("#student").validate({
复制链接

扫一扫