<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>validata</title> <link type="text/css" href="https://www.jb51.net/css/validata.css" /> </head> <body> <div> <form action="##" method="get"> <div> <span>用户登录</span> </div> <div> <span>帐号：</span> <input type="text" placeholder="请输入用户名/手机号" data-require="true" data-require-message="用户名必须填写" data-regex="^\w+$" data-regex-message="用户应该是由字母数字下划线所组成" data-between="6-12" data-between-message="用户名长度必须是在6-12位字符之间" /> </div> <div> <span>密码：</span> <input type="password" placeholder="请输入密码" data-require="true" data-require-message="密码必须填写" data-regex="^[a-zA-Z0-9]+$" data-regex-message="密码应该是由字母数组所组成" data-minlength="8" data-minlength-message="密码长度最少8位" data-maxlength="12" data-maxlength-message="密码长度最多12位" /> </div> <input type="submit" /> </form> </div> <script type="text/javascript" src="https://www.jb51.net/jquery-2.2.4.js"></script> <script type="text/javascript" src="https://www.jb51.net/plug_in/validata.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/index.js"></script> </body> </html>
css：
<style type="text/css"> body, html { width: 100%; height: 100%; font-family: "Microsoft yahei"; } * { margin: 0; padding: 0; } .tc { text-align: center; } .f24 { font-size: 24px; } .rel { position: relative; } .wrapper { max-width: 1186px; } .mt30 { margin-top: 30px; } .member-forms { max-width: 400px; margin: 20px auto; padding: 0 10px; background-color: #fff; } .member-forms .mf-line { margin-top: 30px; border: 1px solid #ddd; line-height: 52px; position: relative; padding-left: 110px; border-radius: 4px; } .member-forms .mf-line.error { border: 1px solid #a94442; } .member-forms .mf-line.success { border: 1px solid #3c763d; } .member-forms .mf-line .mf-name { position: absolute; left: 0; right: 0; text-align: center; width: 110px; } .member-forms .mf-line .mf-txt { display: block; height: 50px; width: 96%; border: 0px; padding: 0 2%; } .member-forms .message { width: 400px; font-size: 12px; color: red; } .member-forms .mf-btn { height: 52px; line-height: 52px; color: #fff; background-color: #5ba0e5; width: 100%; text-align: center; cursor: pointer; font-size: 18px; border: 0px; } </style>
以上这篇jQuery validata插件实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: