前端和后端的输入合法性验证

前端输入合法性的验证：

前端页面：

<div class = "col-12">
	<div class="kx-form-group">
		<lable class="col-6 kx-control-lable"><i class="red-cue">*</i>sim卡号<lable>
		<input type="text class="col-12 form-text" ng-model="xxx" name="simCardNo" ng-blur="checkSimCardNo()"/>
		<span id="checkSimCard" style="display:none">请输入字母或数字</span>
	</div>
</div>

前端js：

var reg = /^[0-9a-zA-Z]*$/;
var csc=document.getElementById("checkSimCard");
$scope.checkSimCardNo = function(){
	if(!reg.test($scope.myPosDeviceVo.simCardNo)){
		csc.style.display="block";
		$scope.myPosDeviceVo.simCardNo=undefined;
	}
}

后端输入合法性的验证：

后端合法性验证需要改动三个地方：1.Vo类或者Model类需要加注解；2.数据库要自定义提示信息；3.前端页面需要在form中加validator=""和data-invalid-msg=""等必要信息。

1.在Vo类或者Model类中加注解

在我们需要验证的地方加注解例如@Require，@Length

例子：public class Xxj，里面包含属性如下

@Require(groups = {Save.class,Update.class})//require表示必填，也有其他注解如@Length和@Max分别表示字符串长度和能够表示的最大值

private String DeviceNo;

然后定义接口，例如：

public static interface Save{}

public static interface Update{}

这里的两个接口与上面的Save.class还有Update.class对应，用来区分在什么时候会用到这个字段的自定义提示，是在保存的时候，还是在更新的时候，名称可以自己定义。

在写完注解和接口之后如果我们启动tomcat会发现生成了两对js文件，每一对分别命名为Xxj_Save和Xxj_Update(这就是那两个接口的作用了)，分别放在不同的目录下，一个是校验规则js一个是校验提示js。根据这两个js来发送提示信息。

注意：在business目录下的source/main/resource/properties目录下有一个application.properties文件，可以在里面配置那两个js的生成路径;application.properties文件里面也需要配置你的Vo类或者model类的路径。

2.数据库自定义提示信息

对应的数据库需要插入一些提示数据

key	locale_id	message	latest_time
Require.xxj.deviceNo	1	设备号不能为空	***
Require.xxj.deviceNo	2	DeviceNo Not Null	***

key列中的Require就是注解的字段，message为提示信息

在数据库中设置key列中的值时，注意大小写，因为在生成js的时候会默认的第一个单词是小写的。

3.在前端页面中写代码

<form g-validator="Xxj_Save" data-invalid-msg="tooltipMessenger">

对应input里面应该有个属性name=“deviceNo”

然后运行，看效果。