xiaoben-as2-php/protected/views/userinfo/add.php

<div class="main-content-inner">
	<div class="breadcrumbs" id="breadcrumbs">
		<ul class="breadcrumb">
			<li>
				<i class="ace-icon fa fa-home home-icon"></i>
				<a>首页</a>
			</li>
			<li>
				<a>学生管理</a>
			</li>
			<li class="active">添加学生</li>
		</ul>
	</div>
	<div class="page-content">
		<div class="row">
			<div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->

				<form class="form-horizontal" action="<?php echo $this->createUrl('userinfo/add');?>" method="post" id="userInfoSubmit">
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">选择年级:</label>
						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<select class="input-medium" onchange="changeYears(this.value);" name="years_id" id="years_id">
									<option value="">请选择年级</option>
									<?php if(!empty($yearsInfo)):foreach($yearsInfo as $loop):?>
										<option value="<?php echo $loop->years_id;?>"><?php echo $loop->years_name;?></option>
									<?php endforeach;endif;?>
								</select>
							</div>
						</div>
						<div class="col-xs-12 col-sm-9" id="classDiv" style="display:none;">
							<div class="clearfix">
								<select class="input-medium" id="class_id" name="class_id">
								</select>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">登录账号:</label>
						<div class="col-sm-9">
							<input type="text" id="school" name="username" class="col-xs-10 col-sm-3" />
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">登录密码:</label>
						<div class="col-sm-9">
							<input type="password" id="password" name="password" class="col-xs-10 col-sm-3" />
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">确认密码:</label>
						<div class="col-sm-9">
							<input type="password" id="password2" name="password2" class="col-xs-10 col-sm-3" />
						</div>
					</div>

					<div class="hr hr-16 hr-dotted"></div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">真实姓名:</label>
						<div class="col-xs-12 col-sm-9">
							<input type="text" name="realname" class="col-xs-10 col-sm-3" />
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">学号:</label>
						<div class="col-xs-12 col-sm-9">
							<input type="text" name="userno" class="col-xs-10 col-sm-3" />
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">性别:</label>

						<div class="col-xs-12 col-sm-9">
							<div>
								<label class="line-height-1 blue">
									<input name="sex" value="1" type="radio" class="ace sex" checked="checked" />
									<span class="lbl"> 男</span>
								</label>
							</div>

							<div>
								<label class="line-height-1 blue">
									<input name="sex" value="2" type="radio" class="ace sex" />
									<span class="lbl"> 女</span>
								</label>
							</div>
						</div>
					</div>

					<div class="clearfix form-actions">
						<div class="col-md-offset-3 col-md-9">
							<button class="btn btn-info" type="submit" id="schoolSubmit">
								<i class="ace-icon fa fa-check bigger-110"></i>
								提交
							</button>
							&nbsp; &nbsp; &nbsp;
							<button class="btn" type="reset">
								<i class="ace-icon fa fa-undo bigger-110"></i>
								重填
							</button>
						</div>
					</div>
				</form>

				<!-- PAGE CONTENT ENDS -->
			</div>
		</div>
	</div>
</div>
		
<script src="/js/jquery.validate.min.js"></script>
<script type="text/javascript">

	jQuery(function($) {
		$('#userInfoSubmit').validate({
			//debug:true,// 表单不会提交
			//errorElement: 'font', // 错误信息div
			errorClass: 'errorMessage', //错误样式
			ignore: "", //忽略提交字段
			rules: {
				years_id: {
					required: true,
				},
				class_id: {
					required: true,
				},
				username: {
					required: true,
				},
				password: {
					required: true,
					minlength: 6
				},
				password2: {
					required: true,
					minlength: 6,
					equalTo: "#password"
				},
				sex: {
					required: true,
				},
				realname: {
					required: true,
				},
				userno: {
					required: true,
				}
			},
			messages: {
				years_id: {
					required: "请选择年级!",
				},
				class_id: {
					required: "请选择班级!",
				},
				username: {
					required: "请填写登录账号!",
				},
				password: {
					required: "请填写登录密码!",
					minlength: "密码不能少于6位字符!"
				},
				password2: {
					required: "请填写确认密码!",
					minlength: "密码不能少于6位字符!",
					equalTo: "两次密码输入不一致!"
				},
				realname: {
					required: "请填写真实姓名!",
				},
				sex: {
					required: "请选择性别!",
				},
				userno: {
					required: "请填写学号!",
				}
			},
			errorPlacement: function (error, element) { // 指定错误信息显示位置
				if(element.is('input[type=radio]')) {
					var controls = element.closest('div[class*="col-"]');
					if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
					else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
				}else{
					error.insertAfter(element.after());
				}	
			},
		})
	});

	// ajax获取班级
	function changeYears(num) {
		if (!num) return;
		$.post("<?php echo $this->createUrl('classes/ajaxclass');?>",{yid:num},function(data){
			var p = eval("("+data+")");
			if (p.flag) {
				$("#classDiv").show();
				var html;
				var cityObj	= $("#class_id");
				cityObj.empty();
				if (p.classList.length > 0){
					html = "<option value=''>请选择班级</option>";
				$.each(p.classList,function(i,n){
					html +=  "<option value='"+n.class_id+"'>" + n.class_name + "</option>";
				});
				} else {
					html = "<option value=''>暂无班级</option>";
				}
				cityObj.append(html);
			} else {
				alert("获取数据失败！");
			}
	    });
	}
</script>