有这样的一个场景,我们在提交form表单的时候 可能要做一些验证,比如判断是不是为空,电话的格式验证,邮箱的格式验证等等,手写起来也是可以得。

但是今天我介绍一个bootstrap插件简化开发。就是bootstrapValidator.js。

直接上手写代码。

1。首先 jquery,bootstrap 以及bootstrapValidator(地址https://github.com/nghuuphuoc/bootstrapvalidator

2.引用jquery bootstrap  bootstrapValidator(css ,js文件都需要引用)

3.代码

<form action="/Account/Register" method="post" id="registerForm">
@Html.AntiForgeryToken()
<div style="margin:0 auto; width:400px;">
<div class="form-group">
<label> Email:</label>
<input type="text" name="email" id="txtEmail" class="form-control" />
</div>
<div class="form-group">
<label> 用户名:</label>
<input type="text" name="Username" id="txtRegisterUsername" class="form-control" />
</div>
<div class="form-group">
<label> 密 码:</label>
<input type="password" name="Password" id="txtRegisterPassword" class="form-control" />
</div>
<div class="form-group">
<label> 密码重复:</label>
<input type="password" name="Confirm" id="txtConfirm" class="form-control" />
</div>
<button type="submit" id="btnRegister" class="btn btn-primary">注册</button>
<button type="reset" class="btn btn-default" id="btnRegister">重置</button>
</div>
</form>

重点就在下面:

  $('#registerForm').bootstrapValidator({
message: '这个值没有被验证',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
notEmpty: {
message: '邮箱是必填项'
},
emailAddress: {
message: '邮箱格式正确'
}
}
},
Username: {
message: '用户名还没有验证',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 1,
max: 16,
message: '用户名长度在1到16位之间'
}
}
},
Password: {
message: '密码还没有验证',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 16,
message: '密码长度在6到16之间'
},
different: {
field: 'Username',
message: '密码不能和用户名相同'
}
}
},
Confirm: {
message: '密码重复还没有验证',
validators: {
notEmpty: {
message: '密码重复不能为空'
},
stringLength: {
min: 6,
max: 16,
message: '密码长度在6到16之间'
},
identical: {
field: 'Password',
message: '两次密码不同请重新输入'
}
}
}
}
}).on('success.form.bv', function (e) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post("/Account/Register", $form.serialize(), function (data) {
console.log(data)
if (data.Status == "ok") {
window.location.href = "/Home/Index";
}
else if (data.Status == "error") {
alert(data.Message);
}
else {
alert("未知错误");
}
});
});

看看效果:

注意下:

这个input的样式必须是这种方式(特别是form-group)

不然会报错。

  <div class="form-group">
<label> Email:</label>
<input type="text" name="email" id="txtEmail" class="form-control" />
</div>

bootstrapValidator.js 做表单验证的更多相关文章

  1. [转]bootstrapValidator.js 做表单验证

    本文转自:https://www.cnblogs.com/nele/p/5493414.html 作者:@nele本文为作者原创,转载请注明出处:https://www.cnblogs.com/nel ...

  2. ★★★【卡法 常用js库】: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度

    [卡法 常用js库]: js汇合 表单验证  cookie设置  日期格式  电话手机号码  email  整数  小数  金额   检查参数长度 // +---------------------- ...

  3. Bootstrap学习总结笔记(24)-- 基于BootstrapValidator的Form表单验证

    Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证 ...

  4. JS通用表单验证函数,基于javascript正则表达式

    表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...

  5. 使用jquery.validation+jquery.poshytip做表单验证--未完待续

    jqueryValidate的具体使用方法很多,这里就不在赘述,这一次只谈一下怎样简单的实现表单验证. 整片文章目的,通过JQvalidation按表单属性配置规则验证,并将验证结果通过poshyti ...

  6. 原生js制作表单验证,基本的表单验证方法

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...

  7. js基础-表单验证和提交

    基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...

  8. JS简单表单验证

    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...

  9. 表单提交学习笔记(二)—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

随机推荐

  1. plsql dev引起的数据库被黑勒索比特币实现原理分析和解决方案

    转自http://www.xifenfei.com/2016/11/plsql-dev-hacker-bitcoin.html afterconnect.sql是plsql dev登录后自动执行脚本, ...

  2. Python 编程小备忘

    1. 获取当前日期,或者间隔当前任意天的日期. >>> import datetime>>> print (datetime.date.today()-dateti ...

  3. BZOJ 4384: [POI2015]Trzy wieże

    4384: [POI2015]Trzy wieże Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 217  Solved: 61[Submit][St ...

  4. [日常训练]curves

    Description 小同学的弟弟小昨天学习了数学中的一元二次函数,但是由于学业不精,他一个晚上都在缠着小问一元二次函数的极值问题,小烦不可耐,于是,想请你帮忙弄个程序来应付小.程序要完成以下任务: ...

  5. 关于git的学习

    Git是目前世界上最先进的分布式版本控制系统(没有之一)! 由于现在用的还不多,还没有这种体会,但是前人的经验是值得借鉴的,所以我认真的学习了一些关于git的简单操作,现在在这分享一些心得,或者说是为 ...

  6. D1

    第一天

  7. dedecms /plus/feedback_ajax.php、/templets/feedback_main.htm、/templets/feedback_edit.htm XSS && SQL Injection Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 通过该漏洞可以注入恶意代码到评论标题里,网站管理员在后台管理用户评论时触 ...

  8. PHPstorm激活

    最近想学习一下PHP 于是下载了很不错的phpstorm  但这老外的工具是要购买正版的 所以就搜了一下破解激活的教程 发现现在网上的在线破解在2016.2版本里面大多已被封杀 尝试了本地破解也发现大 ...

  9. django入门记录 2

    1. 创建一个app, python manage.py startapp  appname 2. 设计model,在appname/目录下编辑好model 3. 检测model的修改,python ...

  10. DropZone

    JavaScript 文件拖拽上传插件 dropzone.js 介绍 February 19, 2014 / 编程指南 dropzone.js 是一个开源的 JavaScript 库,提供 AJAX ...