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: ...
随机推荐
- linux之SQL语句简明教程---SUBSTRING
SQL 中的 substring 函数是用来抓出一个栏位资料中的其中一部分.这个函数的名称在不同的资料库中不完全一样: MySQL: SUBSTR( ), SUBSTRING( ) Oracle: S ...
- poj 1065 Wooden Sticks_贪心
题意:将木棍放在机器里处理,第一根需要一分钟,剩余的如果大于等于前边放入的长度和重量,就不用费时间,否则需要一分钟,计算给出一组数的最少时间. 思路:先按长度排序,相同在比较重量,然后按顺序比较得出结 ...
- Android学习总结——Activity之间传递参数
核心内容:一.在 Activity 之间传递简单数据二.在 Activity 之间传递复杂数据 三.在 Activity 之间传递自定义值对象 软件环境:Android Studio 一.在 ...
- MD5和SHA512Managed ——哈希算法
本文来自:http://www.cnblogs.com/chuncn/archive/2008/02/26/1082418.html C#的哈希 哈希算法是啥?哈希英文hash,是一种数学算法,它能把 ...
- RMAN备份之非归档模式下的备份
Backing Up a Database in NOARCHIVELOG Mode:1.Log into RMAN2.Shutdown immediate from RMAN3.Startup mo ...
- SOA架构有基本的要求
SOA在相对较粗的粒度上对应用服务或业务模块进行封装与重用: 服务间保持松散耦合,基于开放的标准, 服务的接口描述与具体实现无关: 灵活的架构 -服务的实现细节,服务的位置乃至服务请求的底层协议都应该 ...
- SQL Server DML(UPDATE、INSERT、DELETE)常见用法(一)
1.引言 T-SQL(Transact Structured Query Language)是标准的SQL的扩展,是程序和SQL Server沟通的主要语言. T-SQL语言主要由以下几部分组成: 数 ...
- (转)轻量级数据库 SQLite
SQLite Expert – Personal Edition SQLite Expert 提供两个版本,分别是个人版和专业版.其中个人版是免费的,提供了大多数基本的管理功能. SQLite Exp ...
- PHP定义数组常量
最先想到的方法是这样: define('SIGN_CODE', array('9df512','59gf1g','5eg7h1','g1agf5','f5e151','g51gfr','a5481s' ...
- Ubuntu 使用wget 命令下载JDK
wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-securebackup-co ...