Semantic UI中的验证控件的事件的使用
1.Semantic UI中的验证控件,功能挺不错的,中文官网的文档写的都比较详细了,我再这里就不再进行重复了,主要是想说一下它的事件的使用方法,这个可能有部分朋友刚开始接触的时候不太了解
注意看这几个事件:前两个是对于字段验证通过和失败之后的事件的调用,后两个是对整个form是否都验证通过或者失败时调用的事件,于是我们在调用的时候可以这么写
function login()
{ $(".ui.form").form(
{
username: {
identifier: 'userName',
rules: [
{
type: 'empty',
prompt: '用户名不能为空'
}]
},
userpass: {
identifier: 'userPass',
rules: [
{
type: 'empty',
prompt: '用户密码不能为空'
}]
}
}, {
onSuccess: function () {
alert("成功了啊");
}
}
);
}
</script>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.2.js"></script>
<link href="js-ui/packaged/css/semantic.css" rel="stylesheet" />
<script src="js-ui/packaged/javascript/semantic.js"></script>
<script>
//登录验证
function login()
{ $(".ui.form").form(
{
username: {
identifier: 'userName',
rules: [
{
type: 'empty',
prompt: '用户名不能为空'
}]
},
userpass: {
identifier: 'userPass',
rules: [
{
type: 'empty',
prompt: '用户密码不能为空'
}]
}
}, {
onSuccess: function () {
alert("成功了啊");
}
}
);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui form segment">
<div class="ui one column relaxed grid">
<div class="column">
<div class="ui fluid form segment">
<h3 class="ui header">测试系统登录界面</h3>
<div class="field">
<label>用户名</label>
<input type="text" name="userName" id="userName" placeholder="用户名"/>
</div>
<div class="field">
<label>密码</label>
<input type="password" name="userPass" id="userPass"/>
</div>
<div class="ui blue submit button" onclick="login()">登录</div>
</div>
</div>
</div>
<div class="ui error message"> </div>
</div>
</form>
</body>
</html>
对于字段的是在字段的位置写,对于这个事件的调用我也是研究了好久,希望大家遇到这个问题的时候可以看一下。
Semantic UI中的验证控件的事件的使用的更多相关文章
- Visual Studio 2013新建ASP.NET项目使用Empty模板,在页面中使用验证控件出错的解决方案
Visual Studio 2013新建ASP.NET项目使用Empty模板,在页面中使用验证控件,运行页面,会出现如下的错误: 错误原因 VisualStudio 2012(或2013) WebFo ...
- webForm中的验证控件
1.非空验证控件:RequireFieldValidator :2.数据比较验证:CompareValidator :3.数据范围验证:RangeValidator :4.正则表达式验证:Regul ...
- webform中的验证控件及两个应用技巧
一.非空验证--RequiredFiledValidator <一>属性: ErrorMessage--验证出错后的提示信息 ControlToValidate--要验证的控件的ID Di ...
- ASP.NET中的验证控件
ASP.NET提供了如下的控件: RequiredFieldValidator: 字段必填 (ControlTovalidate设定要验证的控件) RangeValidator: 值在给定的最大值,最 ...
- asp.net中自定义验证控件
在windows2003中,可能iis版本太底,不支持TextBox的类型设为Number类型,所以会报错,所以去掉后直接用验证控件来控制必须输入数字好了. <asp:RegularExpres ...
- WinForm中动态添加控件 出现事件混乱,解决办法记录。
还是在抢票软件中出的问题,我没点击一个联系人,要生成一排控件,其中有席别combobox这样的下拉框控件,会出现如下图所示的问题:问题描述:在代码中动态创建的控件,事件混乱了,一个控件触发了所有同类型 ...
- C# winform中自定义用户控件 然后在页面中调用用户控件的事件
下面是用户控件的代码: using System; using System.Collections.Generic; using System.ComponentModel; using Syste ...
- ASP.NET的六种验证控件的使用
C# 中的验证控件分为一下六种 :1 CompareValidator:比较验证,两个字段的值是否相等,比如判断用户输入的密码和确认密码是否一致,则可以用改控件: 2 CustomValidator ...
- .net验证控件
一.客户端验证(用户体验,减少服务器端压力) 二.服务器端验证(防止恶意攻击,客户端js很容易被绕过) 验证控件:RequiredFieldValidator:字段必填:RangeValidator: ...
随机推荐
- 电脑中已有VS2005和VS2010安装.NET3.5失败的解决方案
1.重启 MSI 安装服务: 运行-输入“CMD”命令,在弹出的对话框中输入命令: msiexec/unregserver ,回车,并再次输入 msiexec/regserver . 2.启用 Pri ...
- ReactNative setNativeProps
在封装原生组件的过程,如果我们希望在reactnative中触发原生的属性,但是又不需要暴露在reactnative的组件中. 那么我们就要用到setNativeProps这个方法,这个方法会直接触发 ...
- 泛泰A900 刷4.4专用中文TWRP2.7.1.1版 支持自己主动识别手机版本号(全球首创)
因本人手上的A900S已砖, 所以临时弄不了ROM了, 先上传之前已经弄好的刷4.4专用的新版TWRP recovery 2.7.1.1 这个版本号是我自己定义的,为差别之前公布的2.7.0.0版( ...
- JDK自带工具jps,jstat,jmap,jconsole使用
jps 与ps命令类似: ps -ef|grep java 用来显示本地的java进程,查看本地执行着几个java应用,并显示进程号. [root@SE43 ~]# jps //仅仅显示进程号 238 ...
- ISG2015
一天的成果. Re300 是男人就下一百层 一个64位的程序,放到IDA里的话,IDA就会分析不动,这样就把人给下着了.objdump –d re300 > output,这样拿到汇编代码,大概 ...
- UVA 12219 Common Subexpression Elimination
题意: 求最小的表达式树,也就是把相同的表达式子树给替换成最前面相同的编号. 分析: 用map<string,int>smp;存放子树对应的字符串,如果以后出现相同的子树则用相同编号表示. ...
- 静态变量static
1.在我们平时些程序中我们经常需要一些变量的他们能纪录我们所需要的值,但是平常的int类型达不到这样的目的,所以呢就有了static的基态变量,静态变量就像 B/S中的session,cookio等 ...
- 开发移动端web应用, 使用手机自带键盘的搜索按钮
很多时候在移动端的web页面中, 需要使用搜索功能, 然而页面中并没有太多的空间来放置一个像pc端上那样的搜索按钮, 这时候就需要借用手机输入法自带的搜索按钮来实现点击搜索 虽然不是什么大的功能, 但 ...
- 利用js闭包获取索引号
以tab选项卡效果为例: 网页中的选项卡效果
- Android WebView 小结
1.设置网页的缩放比例的时候,可以使用以下属性: mWebview.setInitialScale(25);//为25%,最小缩放等级 WebSettings setting = mWebview.g ...