Bootstrap v3.3.0和html5自带的表单验证

来源：互联网 2023-03-16 23:54:13 475

之前很少碰及前端框架，也没怎么用过。因工作内容，需要几个简单的前端页面，并且需要表单验证等一系列功能。实在不想动手写js，搜索了些插件又嫌麻烦。恰好发现了bootstrap v3.3.0中的验证，感觉已经能满足要求。

工具/原料

下载bootstrap v3.3.0，在页面导入js文件jquery.js，bootstrap.js和层叠样式表文件bootstrap.css。

完成form表单，在input标签中插入required属性，表示为必填项；插入pattern属性，属性值放一个正则表达式来判断输入内容格式；插入title属性，表示提示内容，同时bootstrap弹出提示内容中会加上title的内容。

比如密码的验证：

Bootstrap v3.3.0和html5自带的表单验证

密码验证效果：

Bootstrap v3.3.0和html5自带的表单验证

如果是特殊项的话还可以直接设置input的type的属性，比如email的验证，bootstrap自带了验证规则，可以省略pattern的设置，当然也可以重新自定验证规则

Bootstrap v3.3.0和html5自带的表单验证

验证效果：

Bootstrap v3.3.0和html5自带的表单验证

5相关内容非法爬取自百度经验

这些内容都比较容易的做了出来，不曾想，卡在了验证码上，因为我从服务器端使用google验证码框架生成验证码，在这里无法做直接用pattern来验证输入内容，试了很多种方法都不能完成需求，也没有找到文档中使用js来重定义验证规则的内容。最后突然想到使用属性匹配的方式，如下。

Bootstrap v3.3.0和html5自带的表单验证

这样在js代码中，可以动态的匹配验证码。效果展示：

ps:

原来前端开发的小伙伴们也是挺累的！为所有精彩的前端页面点赞。

Bootstrap v3.3.0和html5自带的表单验证

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JQUERY

上一篇：jquery-Ajax原理实例讲解下一篇：用变量作为$()里面的id值