验证中...
8月18日(周六)成都源创会火热报名中,四位一线行业大牛与你面对面,探讨区块链技术热潮下的冷思考。
语言: HTML
分类: Web开发技术
最后更新于 2018-02-12 17:15
片段 1 片段 2
弹出框代码<a href="#modal-container-add" role="button" class="btn btn-info btn-block" data-toggle="modal">
原始数据 复制代码
<!-- *********** 增加按钮的弹出框 *********** -->
<div id="modal-container-add" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">
添加用户信息
</h3>
</div>
<form id="logForm" action="{$smarty.const.__SELF__}" method="post" class="form-horizontal" role="form">
<div class="modal-body">
<div class="container-fluid">
<div class="form-group">
<label>用户名</label>
<input type="text" name="huser_name" class="form-control" placeholder="用户名">
</div>
<div class="form-group">
<label>用户密码</label>
<input type="text" name="huser_password" class="form-control" placeholder="密码">
</div>
<div class="form-group">
<label>确定密码</label>
<input type="text" name="huser_password_2" class="form-control" placeholder="密码">
</div>
<div class="form-group">
<label>性别</label>
<select class="form-control" name="huser_sex" id="con_select">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="form-group">
<label>年龄</label>
<input type="number" name="huser_age" class="form-control" placeholder="密码">
</div>
</div>
</div>
<div class="modal-footer ">
<button class="btn " data-dismiss="modal">关闭</button>
<button type="submit" class="btn btn-primary ">保存</button>
</div>
</form>
</div>
</div>
</div>
弹出框中的表单验证
原始数据 复制代码
<!-- *********** 增加弹出框的js表单验证 *********** -->
<script>
$(document).ready(function () {
$('#logForm').bootstrapValidator({
// message: '用户名不能为空',
// 表单验证的样式,bootstrap样式
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// 生效规则(三选一),enabled 字段值有变化就触发验证,
// disabled,submitted 当点击提交时验证并展示错误信息
live: 'enabled',
// 表单域配置
fields: {
huser_name: {
// 隐藏或显示 该字段的验证,默认true
enabled: true,
validators: {
notEmpty: {
// 错误提示信息
message: '用户名不能为空'
},
stringLength: {
min: 3,
max: 24,
// 错误提示信息
message: '用户名只能在3-24个字符之间哦'
},
regexp: {
regexp: /^[a-zA-Z0-9-_]+$/,
message: '用户名只能由字母、数字组成'
}
}
},
huser_password: {
// 隐藏或显示 该字段的验证,默认true
enabled: true,
validators: {
notEmpty: {
// 错误提示信息
message: '密码不能为空'
},
stringLength: {
min: 3,
max: 24,
// 错误提示信息
message: '密码只能在3-24个字符之间哦'
},
regexp: {
regexp: /^[a-zA-Z0-9-_]+$/,
message: '密码只能由字母、数字组成'
}
}
},
huser_password_2: {
// 隐藏或显示 该字段的验证,默认true
enabled: true,
validators: {
notEmpty: {
// 错误提示信息
message: '密码不能为空'
},
stringLength: {
min: 3,
max: 24,
// 错误提示信息
message: '密码只能在3-24个字符之间哦'
},
regexp: {
regexp: /^[a-zA-Z0-9-_]+$/,
message: '密码只能由字母、数字组成'
},
identical: {
field: 'huser_password',
message: '两次密码不一致'
}
}
},
huser_age: {
// 隐藏或显示 该字段的验证,默认true
enabled: true,
validators: {
notEmpty: {
// 错误提示信息
message: '年龄不能为空'
}
}
}
}
});
});
</script>

评论列表( 0 )

你可以在登录后,发表评论