手机端表单验证插件-白红宇

手机端表单验证插件

阅读量：6971 次

发布时间：2019-06-27

本文共 2892 字，大约阅读时间需要 9 分钟。

html结构


         
     手机号
     
     姓名
     
     职位
     
     股票代码
     
     公司名称
 
    
 css部分

.field-invalid{
      border-color:#a94442; } .field-invalidmsg{
      color:#a94442; } .field-validmsg{
      color:#3c763d; } .field-tooltipWrap{
      position: absolute;     left: 0;     top: 0;     width: 100%;     z-index: 19891014; } .field-tooltipInner{
      pointer-events: none;     display: table;     position:fixed;     left:0;     top:0;     width:100%;     height:100%; } .field-tooltip{
      display: table-cell;     vertical-align: middle;     text-align: center; } .field-tooltip .field-invalidmsg, .field-tooltip .field-validmsg{
      color: #fff; } .field-tooltip .zvalid-resultformat{
      display: inline-block;     position: relative;     font-weight:bold;">rgba(0,0,0,0.8);     color: #fff;     padding: 10px 15px;     font-size: 14px;     border-radius: 6px;     box-shadow: 0 0 8px rgba(0,0,0,.1);     pointer-events: auto;     animation-name:fieldTipBounceIn;     -webkit-animation-name:fieldTipBounceIn;     -webkit-animation-fill-mode: both;     animation-fill-mode: both;     -webkit-animation-duration: .18s;     animation-duration: .18s; } @-webkit-keyframes fieldTipBounceIn{
      0% {
          opacity: 0;         -webkit-transform: scale3d(.3, .3, .3);         transform: scale3d(.3, .3, .3);     }     100% {
          opacity: 1;         -webkit-transform: scale3d(1, 1, 1);         transform: scale3d(1, 1, 1);     } } @keyframes fieldTipBounceIn {
      0% {
          opacity: 0;         -webkit-transform: scale3d(.3, .3, .3);         transform: scale3d(.3, .3, .3);     }     100% {
          opacity: 1;         -webkit-transform: scale3d(1, 1, 1);         transform: scale3d(1, 1, 1);     } }

js部分

//表单验证 $("#myform").mvalidate({
      type:1,     onKeyup:true,     sendForm:true,     firstInvalidFocus:false,     valid:function(event,options){
          //点击提交按钮时,表单通过验证触发函数         //alert("验证通过！接下来可以做你想做的事情啦！");         alert('通过了验证');         event.preventDefault();     },     invalid:function(event, status, options){
          //点击提交按钮时,表单未通过验证触发函数         // alert("表单未通过验证！");     },     eachField:function(event,status,options){
          //点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域，是jquery对象         // alert("每个都弹出！");     },     eachValidField:function(val){},     eachInvalidField:function(event, status, options){},     conditional:{
      },     descriptions:{
          username:{
              required : '请输入姓名'         },         userphone : {
              required : '请输入手机号码',             pattern : '手机号格式不正确'         },         stockcode : {
              required : '请输入股票代码'         },         positionname : {
              required : '请输入您的职位'         },         companyname : {
              required : '请输入公司名称'         }     } });