我们让用户输入有固定格式数据的时候,例如电话号码,需要自己写验证进行验证,如果在输入的时候可以规定格式的话就能方便很多了。
maskedinput插件可以解决这个问题,效果图如下:
这样能防止用户输入错误的可能。
maskedinput下载地址:https://github.com/digitalBush/jquery.maskedinput
官方地址:http://digitalbush.com/projects/masked-input-plugin/
使用如下:
首先引入js:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.maskedinput.js" type="text/javascript"></script>
2.使用mask方法直接套用格式
jQuery(function($){
$("#date").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
其中9代表数字
a代表字符
*代表数字和字符
通过源码定义可以看出此定义
$.mask = { //Predefined character definitions definitions: { '9': "[0-9]", 'a': "[A-Za-z]", '*': "[A-Za-z0-9]" }, dataName: "rawMaskFn", placeholder: '_', //定义格式的占位符 };
3.通过unmask方法可以取消原来的定义格式
4.还可以自定义自己的验证
jQuery(function($){ $.mask.definitions['~']='[+-]'; $("#eyescript").mask("~9.99 ~9.99 999"); });