如何优雅的实现表单验证

Question

平时写表单验证时一般都是这样写的:

if($('#type').val() == ""){
    $.toast("请选择请假类别");
    return false;
}
if($('#start_datetime_picker').val() == ""){
    $.toast("请选择开始日期");
    return false;
}
if($('#end_datetime_picker').val() == ""){
    $.toast("请选择结束日期");
    return false;
}
if($('#reason').val() == ""){
    $.toast("请选择原因");
    return false;
}

这样写太痛苦了。所以请教大家，有什么更好的写法呢？或者说如何封装一下呢？

Answer 1

表单验证比较好的实践方式是将每类验证都封装为一个验证策略，如非空验证，数字验证，正则验证等，然后将表单项传入对应策略得到验证结果。

Answer 2

[
    { selector: '#type', msg: '请选择请假类别' },
    { selector: '#start_datetime_picker', msg: '请选择开始日期' }
    // ...
].some(function (item) {
    if ($(item.selector).val() == "") {
        $.toast(item.msg)
        return true;
    }
});

不想加第三方库就这么写，不然还是看看jQuery Validate

Answer 3

参考下这个
jQuery Validate | 菜鸟教程
http://www.runoob.com/jquery/jquery-plug...

Answer 4

如何JS技术不错，可以尝试自己封装，你把你写的函数绑给form，然后遍历每个子节点（input），然后根据节点上面你自定义的元素如data-type="number"，然后自行对应你写的方法函数。话说最近在封装，当水平有限，写的各种BUG。 所以打算借助第三方插件了，如：jQuery Validate

Answer 5

你可以看看这个：https://github.com/WLDragon/sm-validator
直接把正则写在html上就可以了，很方便的，看看demo你就明白
https://wldragon.github.io/sm-validator/