我已经看到了很多的功能,该格式的电话或stackflow社区编号(逗号和小数点)这样的问题,在这里和其他人.这就是我想要的:
第1步:为这样的模式维护库:
var library = {
fullDate : {
pattern : /^[0-9]{4}-[0-9]{1,2}-[0-9]{1,2}$/,
error : "Invalid Date format. Use YYYY-MM-DD format."
},
fullDateTime : {
pattern : /^[0-9]{4}-[0-9]{1,2}-[0-9]{1,2} [0-9]{1,2}:[0-9]{1,2}$/,
error : "Invalid DateTime format. Use YYYY-MM-DD HH:MM (24-hour) format."
},
tel : {
pattern : /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
error : "Invalid Telephone format."
}
};
Run Code Online (Sandbox Code Playgroud)
第2步:在键入时自动添加字符.例如,-在日期中添加4个数字.
我有一个文字字段说:
<input type="text" data-validate="fullDate" placeholder="YYYY-MM-DD"/>
Run Code Online (Sandbox Code Playgroud)
并可以启动脚本的地方:
$('body').on('keyup','input',function(){
var validate = $(this).data('validate');
var pattern = library[validate].pattern;
//Some more steps here....
});
Run Code Online (Sandbox Code Playgroud)
但是,我不能再进一步了,因为我是RegExp的新手.这是一个创业小提琴.任何人?
进一步说明:我已经能够使用以下函数进行验证,但我想要的是自动生成模式:
function validate(libraryItem, subject){
var item = library[libraryItem];
if(item !== undefined){
var pattern = item.pattern;
if(validatePattern(pattern, subject)){
return true;
} else {
return item.error;
}
}
return false;
}
function validatePattern(pattern, subject){
return pattern.test(subject);
}
Run Code Online (Sandbox Code Playgroud)
它并不像你想象的那么复杂.您正在寻找的是JQuery Masked输入和其他替代库.这是文档.所有你需要的是:
<input id="date" type="text" placeholder="YYYY-MM-DD"/>
Run Code Online (Sandbox Code Playgroud)
和脚本:
$("#date").mask("9999-99-99",{placeholder:"YYYY-MM-DD"});
Run Code Online (Sandbox Code Playgroud)
这是演示笔链接:http: //codepen.io/anon/pen/gpRyBp
要实现验证,请使用以下库:https: //github.com/RobinHerbots/jquery.inputmask