• 使用BootstrapValidator实现表单验证
  • 心源 发表于 2016/3/3 7:09:00 | 分类标签: bootstrap教程 验证表单
  • bootstrap验证表单效果,直接上代码:

    $(function () {
    $('form').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
    username: {
    message: '用户名验证失败',
    validators: {
    notEmpty: {
    message: '用户名不能为空'
    },
    stringLength: {
    min: 6,
    max: 18,
    message: '用户名长度必须在6到18位之间'
    },
    regexp: {
    regexp: /^[a-zA-Z0-9_]+$/,
    message: '用户名只能包含大写、小写、数字和下划线'
    }
    }
    },
    email: {
    validators: {
    notEmpty: {
    message: '邮箱不能为空'
    },
    emailAddress: {
    message: '邮箱地址格式有误'
    }
    }
    }
    }
    });
    });
    加上了重叠验证我们来看效果:
    由上面的代码可以看出在validators属性对应一个Json对象,里面可以包含多个验证的类型:

    notEmpty:非空验证;
    stringLength:字符串长度验证;
    regexp:正则表达式验证;
    emailAddress:邮箱地址验证(都不用我们去写邮箱的正则了~~)
    除此之外,在文档里面我们看到它总共有46个验证类型,我们抽几个常见的出来看看:
    base64:64位编码验证;
    between:验证输入值必须在某一个范围值以内,比如大于10小于100;
    creditCard:身份证验证;
    date:日期验证;
    ip:IP地址验证;
    numeric:数值验证;
    phone:电话号码验证;
    uri:url验证;
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:心源
  • 加入时间:2013/5/14 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮