手机端表单验证插件

html结构

<form id="myform">    <p><label>手机号</label><input name="user_phone" type="text" placeholder="请输入您的手机号码" data-pattern="^0?1[3|4|5|8][0-9]\d{8}$" data-required="true" data-descriptions="userphone" data-describedby="userphone-description"/></p>    <p><label>姓名</label><input name="user_name" type="text" placeholder="请填写您的姓名" data-required="true" data-descriptions="username" data-describedby="username-description"></p>    <p><label>职位</label><input name="position_name" type="text"  placeholder="请填写您的职位" data-required="true" data-descriptions="positionname" data-describedby="positionname-description"></p>    <p><label>股票代码</label><input name="stock_code" type="text" placeholder="请填写您公司的股票代码" data-required="true" data-descriptions="stockcode" data-describedby="stockcode-description"/></p>    <p><label>公司名称</label><input name="company_name" type="text" placeholder="请填写您公司的名称" data-required="true" data-descriptions="companyname" data-describedby="companyname-description"/></p></form>

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 : ‘请输入公司名称‘        }

}});

下载插件

jquery-mvalidate.jsmvalidate.css