`

bootstrap的js插件 sco.js之表单验证

 
阅读更多

验证插件:

http://www.bootcss.com/p/sco.js/#valid

验证方法:

在html界面中通过正则表达式等静态验证:

html:

      <label>
                <div >
                    email:
                </div>
                <input type="text" id="email" name="email">
                <span class="message">&nbsp;</span>
      </label>

 

js:

$('#valid_form').scojs_valid( {

			rules : {
				title : [ 'not_empty' ],
				content : [ 'not_empty' ]
			},
			onSuccess : function(response, validator, $form) {
			}
			,onError: function(response, validator, $form) {...}
			,onFail: function(response, validator, $form) {...}
	});

后台验证结果按照Jsend的方式组包:

Jsend:

http://labs.omniti.com/labs/jsend

 

后台验证返回结果分3种:

成功:{"status":"success","data":{"next":"http://google.com"}}

失败:{"status":"fail","data":{"errors":{"email":"This error comes from server side"}}}

错误:{"status":"error","message":"The server made a boo boo"}

对3种结果分析:

成功:对数据操作成功,可以跳转到指定界面或者弹出提示(需引入sco.message.js).

失败:数据操作过程失败,比如新建一个用户,但是用户名已经存在,那么返回失败信息,界面上可以直接定位到失败字段,然后在后面输出失败信息。

错误:未知错误,直接弹出提示(需引入sco.message.js).

 

如果在界面引入了sco.message.js,那么:

(1).如果静态验证(scojs_valid)中onSuccess等函数有声明,则先执行函数,然后弹出sco.message的提示。

(2).如果想不弹出提示,而单单执行回调函数,则返回组包应这样:{"status":"success(fail/error)","data":"null"}

(3).待续。

  • 大小: 167.5 KB
分享到:
评论

相关推荐

    bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js

    Bootstrap框架虽然主要基于CSS,但其JavaScript插件提供了丰富的交互功能,如模态对话框、轮播图、导航条下拉菜单等,这些都需要JavaScript支持。 在压缩包的文件名称列表中,我们看到了`about.css`,这可能是一个...

    bootstrap.bundle.min.js

    bootstrap.bundle.min.js,python django-bootstrap-4.6.2 版本的JS文件

    bootstrap.min.js和bootstrap.min.css

    这些插件包括导航条、模态框、下拉菜单、轮播图、表单验证等。"min"表示这是一个最小化版本,即通过删除不必要的空格和注释进行了压缩,以减少文件大小,提高页面加载速度。在实际应用中,你需要将这个文件链接到...

    layui资源插件layui.js、bootstrap.js、jquery.js

    layui资源插件layui.js、bootstrap.js、jquery.js 适用人群,layui小白、可与用于框架搭建、手机自适应、轮播图应用、弹出框应用、数据表格应用、表单应用 描述:该框架有个极大的好处就是定义了很多前后端交互的...

    bootstrap.bundle.min.js.map

    浏览器报错找不到这个的可以下载这个

    Bootstrap(包含boostrap.min.js以及bootstrap.min.css)

    2. `bootstrap.min.js`:这是Bootstrap的JavaScript插件集合,经过压缩以提高加载速度。这些插件增强了框架的功能,如:模态对话框的交互、折叠内容、轮播图、下拉菜单的动态效果等。虽然Bootstrap的很多功能可以...

    bootstrap-switch.min.js

    bootstrap-switch.min.js

    bootstrap.min.js静态文件

    用于渲染前端静态页面

    bootstrap-treeview.min.js

    bootstrap框架需要的js bootstrap-treeview.min.js

    bootstrap-datetimepicker.js

    Bootstrap-Datetimepicker.js是一款基于Bootstrap框架的日期时间选择器插件,它为用户提供了便捷的方式来选取日期和时间,尤其在Web应用中常用于表单输入。这个插件的设计风格与Bootstrap一致,确保了与Bootstrap...

    bootstrap3-validation.js-master

    Bootstrap3-validation.js是一个基于Bootstrap 3框架的表单验证插件,主要用于提高用户界面的交互性和数据输入的准确性。在Web开发中,表单验证是一个关键环节,它确保用户提交的数据符合预设的规则,避免无效或错误...

    bootstrapValidator.min.js

    bootstrap表单验证插件,css前边上传了,现在把bootstrapValidator.min.js也上传一下

    bootstrap.min.js+bootstrap.css

    这个压缩包包含`bootstrap.min.js`和`bootstrap.css`,这两个文件是Bootstrap的核心组件,分别负责JavaScript功能和样式设计。 `bootstrap.min.js`是Bootstrap的压缩版JavaScript库,包含了Bootstrap的所有交互功能...

    bootstrap(3.4.1)+jquery.min.js

    3. **JavaScript 插件**:除了 CSS,Bootstrap 还包含了一些基于 jQuery 的插件,如 collapse(折叠)、carousel(轮播图)、dropdowns(下拉菜单)等,这些插件增强了页面的交互性。 4. **定制**:Bootstrap 3.4.1...

    bootstrap.min.js.map

    解决报错:GET /static/css/bootstrap.min.js.map HTTP/1.1" 404 使用方法在这:https://blog.csdn.net/c_lanxiaofang/article/details/130614846

    bootstrap-editable.js

    标签"bootstrap editable js"揭示了这个插件主要依赖的技术栈:Bootstrap(一个流行的前端框架)、以及JavaScript(用于实现交互功能)。Bootstrap提供了响应式设计和组件,而JavaScript则是实现页面动态交互的核心...

    jquery.min.js+bootstrap.min.js+bootstrap.min.css.zip

    在本压缩包中,`bootstrap.min.js` 是 Bootstrap 的 JavaScript 文件,包含了 Bootstrap 的插件和交互功能,而 `bootstrap.min.css` 是 Bootstrap 的 CSS 文件,定义了各种组件和布局的样式。 - **Bootstrap CSS**...

    BootStrap-table.js 官网下载

    Bootstrap-table.js 是一个基于Bootstrap框架的前端数据展示插件,它允许用户在网页上创建功能丰富的、可操作的表格。这个插件的核心理念是提供一个简单而强大的方式来展示动态数据,同时保持良好的用户体验和响应式...

    jquery.min.js+bootstrap.min.js+bootstrap.min.css

    `bootstrap.min.js`和`bootstrap.min.css`分别是其JavaScript插件库和最小化的CSS样式文件。 1. **响应式设计**: 通过栅格系统适应不同设备屏幕大小,实现自适应布局。 2. **组件**: 包含导航栏、按钮、下拉菜单、...

    bootstrap-table-editable.js+bootstrap-editable.js+bootstrap-editable.css

    压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑

Global site tag (gtag.js) - Google Analytics