如何在不使用jquery的情况下进行自动工具提示验证?

时间:2015-12-28 07:15:32

标签: javascript angularjs css3 twitter-bootstrap-3

在这里,我创建了用于验证的示例文件,该工作正常... 我需要在不使用jquery的情况下实现相同的功能。 我的要求是需要在自动工具提示中显示的错误消息。需要在出现错误时自动显示,并在错误清除后自动隐藏。直到错误清除popup需要留下来。

是否有可能在没有jquery ???

的情况下实现相同的目标



function validate(el) {
  var regex = /^\d+$/g;
  var valid = regex.test(el.value);
  if (!valid) {
    
    // Check if popover is already visible to handle flicker effect.
    if ($("#txtInput").next('div.popover').length == 0) {
      
      $('#txtInput').popover({
        placement: 'bottom',
        content: 'This is not a valid entry'
      }).popover('show');
      
    }
  } else {
    $('#txtInput').popover('hide');
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Enter value:
<input type="text" id="txtInput" onkeyup="validate(this)">
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

使用它 .`

<!-- show an error if username is too short -->
<p ng-show="userForm.username.$error.minlength">Username is too short.</p>

<!-- show an error if username is too long -->
<p ng-show="userForm.username.$error.maxlength">Username is too long.</p>

<!-- show an error if this isn't filled in -->
<p ng-show="userForm.username.$error.required">Your username is required.</p>

`

或通过ngMessages

使用它
<form name="userForm">

<input 
    type="text" 
    name="username" 
    ng-model="user.username" 
    ng-minlength="3" 
    ng-maxlength="8"
    required>

<div ng-messages="userForm.name.$error">
    <p ng-message="minlength">Your name is too short.</p>
    <p ng-message="maxlength">Your name is too long.</p>
    <p ng-message="required">Your name is required.</p>
</div>