Question

我想验证客户端是否在输入中添加任何值但不能仅添加空格。客户可以在数字，字母或字符之间加上白色空格。

<input class="form-control" 
       name="description" 
       placeholder="Add your description" 
       ng-model="$ctrl.description" 
       pattern="^[\\S]([\\wéáíóúñÑ,.:-¿?!() ])+$" 
       required>

我可以在模式中添加什么来验证html代码？。

Answer 1

对于基本的html5验证，请使用以下代码段。注意，标题将显示为最终用户的错误描述。

<input class="form-control" 
       name="description" 
       placeholder="Add your description" 
       ng-model="$ctrl.description" 
       pattern=".*\S+.*"
       title="Description is required"
       type="text"
       required>

Answer 2

编辑答案：

您只需使用正则表达式[\w,./_=?-]+。

正则表达式解释与细分：
+量词 - 在一次和无限次之间匹配，尽可能多次，根据需要回馈（贪婪）
\w匹配任何字词（等于[a-zA-Z0-9_]）
,.匹配列表,.中的单个字符 /字面匹配字符/ _=?-匹配列表_=?-

中的单个字符

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope',
  function($scope) {

    $scope.checkSpace = function(event) {
      if (event.keyCode === 32 && typeof $scope.inputBox === 'undefined') {
        event.preventDefault();
      }
    };

  }
]);

＆＃13;

.ng-invalid {
  border: 1px solid red;
}
.ng-valid {
  border: 1px solid green;
}
input:focus {
  outline: none;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body ng-app='myApp'>
  <div ng-controller="MyCtrl">

    <input class="form-control" name="description" placeholder="Add your description" ng-model="inputBox" ng-keydown="checkSpace($event)" pattern="[\w,./_=?-]+" required>

  </div>
</body>

</html>

＆＃13;

请注意，如果ng-invalid类的值只有空格，则会将won't类添加到该元素中。

如何添加模式以仅在html模式中验证非空格？

2 个答案: